如何阻止事件泡泡

Question

在頁面中有兩個div，即外部和內部。

我將mousemove事件綁定到外部div，當用戶mousemove在外部div中時，它將顯示鼠標的clientX和clientY。

此外，我讓內部可拖動，這裏是live example。

1）我不想當外部的mousemove事件觸發，當我拖動內部股利。

當我拖動內部div時，當然可以設置「outer.onmousemove = null」，但我不認爲這是自外部div上的事件可能被其他人綁定的最佳方式。

我嘗試使用event.cancalBubble，但它似乎不起作用。

2）當我拖動內部div時，它會選擇Firefox中的文本，如何阻止它？

Answer 1

有可以被調用，以確保兩個功能，該事件氣泡停止：

event.stopPropagation(); 
event.preventDefault(); 

如果你請確保調用這兩個的話，應該避免兩個被選中父DIV和文本被選中。

編輯：

仔細看看你的代碼，我看到一些問題。首先，您使用onmousemove事件在「外部」div中註冊鼠標座標。然後你使用onmousemove上的文件拖動到「inner」div。這意味着如果您在開始拖動時停止onmousemove事件的傳播，它將永遠不會冒泡到文檔節點，從而導致可拖動的div永遠不會被拖動，直到您將鼠標移動到「內部」div之外區。

一種解決方案是設置可移動DIV而不是文件的_mouseMove功能，然後停止這樣的傳播：

/* Remove this */ 
//document.onmousemove=_mouseMove; 
//document.onmouseup=_mouseUp; 

/* Add this */ 
move_ele.onmousemove=_mouseMove; 
move_ele.onmouseup=_mouseUp; 
e.stopPropagation(); 
e.preventDefault(); 

這將使其工作就像你提到的，當你拖動如此之快，除了光標離開「內部」div區域，然後停止拖動，直到光標再次進入div區域。

另一種解決方案是處理這一切在「外」的div的OnMouseMove事件，看看是否鼠標實際上是移動了該div，而不是「內部」是這樣的：

out.onmousemove=function(e){ 
    /* Check to see if the target is the "outer" div */ 
    if(e.target == this){ 
     e=e==null?window.event:e; 
     note.innerHTML=e.clientX+','+e.clientY; 
    } 
} 

這也將工作就像你提到的那樣，但是即使你沒有開始拖動，只要將光標移動到內部div上，它也會停止更新座標。