Question

我有一个我正在制作的滑块。我进展缓慢，但我仍在取得进步！目前我有这个：

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

使用此控件可以做两件事，第一件事是你可以向左或向右拖动。你可以做的第二件事是点击＆＃34;点＆＃34;它会滚动到中心。我遇到的问题是，如果我从一个点开始拖动，当我放手时它会调用 moveToCenter 方法。

我试图通过添加

来防止这种情况发生

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

到 dragEventHandler 的末尾，但这不起作用。我还有2个布尔值 options.drag 和 options.start 。我可能会以某种方式使用它们（如果拖动已经启动并启用，那么不要执行 moveToCenter ，但这也不起作用。

有没有人知道如何让它发挥作用？

Answer 1

也许这会有所帮助。您可以使用addEventListener方法在冒泡或捕获模式下注册事件。它定义了处理事件的顺序 - 孩子 - ＆gt;父母（冒泡），反之亦然（捕捉）。

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）＆gt; -1）：

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

而不是

options.started = false;

希望这会有所帮助。

防止儿童事件被解雇

1 个答案: