防止儿童事件发生

我有一个我目前正在制作的滑块。我进展缓慢，但我仍在进步！目前我有这样的：防止儿童事件发生

http://codepen.io/r3plica/pen/mEKyGG?editors=1011#0

有两件事情你可以用这个控制做的第一件事情是你可以向左或向右拖动。你可以做的第二件事是点击一个“点”，它将滚动到中心。我现在的问题是，如果我从一个点开始拖动，那么当我放开它时，会调用moveToCenter方法。

我曾尝试加入

// Stop from accessing any child events 
e.preventDefault(); 
e.stopPropagation();

到dragEventHandler结束防止这种情况，但这并没有工作。我也有2个布尔值options.drag和options.start。不过，我觉得如果拖动已经开始，并已启用，不执行moveToCenter但是这也不能工作，我也许可以以某种方式使用它们（

不要任何人有任何想法如何得到这个工作吗？

来源

2016-07-26 r3plica

尝试使用'e.stopImmediatePropagation（）;'而不是'e.stopPropagation（）;' – somethinghere

'stopPropogation'可以防止事件冒泡并触发父项事件，而不是反过来。 'preventDefault'停止元素的默认行为。（IE：刷新页面的提交按钮）。此外，请将代码添加到您的问题，而不是链接到codepen。 – Jacques

也许这样会有帮助，你可以使用addEventListener方法注册你的事件，它定义了处理事件的顺序 - child - > parent（bubbling），反之亦然（捕获）

http://www.quirksmode.org/js/events_advanced.html

所以，如果你使用addEventListener（event，handler，true），它将使用捕获事件模式。

Codepen：

http://codepen.io/anon/pen/bZKdqV?editors=1011

divs.forEach(function (div) { 
     div.addEventListener('click', function(e) { 
     e.stopPropagation(); 
     console.log('parent'); 
     }, true); 
    });

注意的浏览器支持（IE9 +）。所有现代浏览器 - 当然是。

http://caniuse.com/#search=addeventlistener

更新

所以它竟然比第一种方法更容易。（无需捕捉）退房codepen：

http://codepen.io/anon/pen/QExjzV?editors=1010

变化从您的样品：在moveToCenter的开头：功能（E，期权，动画）功能

if (options.started) { 
    return; 
}

在if（['mouseup'，'mouseleave']。indexOf（e.type）> -1）：

setTimeout(function() { 
    options.started = false; 
} , 100);

代替

options.started = false;

希望这有助于。

来源

2016-07-26 14:42:41 berliner

似乎做了一些非常奇怪的事情，如果我改变甚至听众捕捉。当我尝试滚动时，它突然停下来。 http://codepen.io/r3plica/pen/JKkdOa?editors=1011#0 – r3plica

@ r3plica是的，看起来并不像你想要的那样:)我会尽量玩弄，让你知道如果找到解决方案 – berliner

我很感激 – r3plica

防止儿童事件发生

回答

相关问题