防止兒童事件發生

Question

我有一個我目前正在製作的滑塊。我進展緩慢，但我仍在進步！ 目前我有這樣的：

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但是這也不能工作，我也許可以以某種方式使用它們（

不要任何人有任何想法如何得到這個工作嗎？

Answer 1

也許這樣會有幫助，你可以使用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; 

希望這有助於。