Question

在页面中有两个div，外部和内部。

我将mousemove事件绑定到外部div，当用户鼠标移动到外部div时，它将显示鼠标的clientX和clientY。

我也可以将内部div拖动，这里是live example。

1）当我拖动内部div时，我不希望外部的mousemove事件触发。

当我拖动内部div时，我可以设置“outer.onmousemove = null”，但我不认为这是最好的方式，因为外部div上的事件可能被其他人绑定。

我尝试使用event.cancalBubble，但似乎它不起作用。

2）当我拖动内部div时，它会选择firefox中的文本，如何阻止它？

Answer 1

可以调用两个函数来确保事件气泡停止：

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

如果你确保同时调用这两个，那么它应该阻止选择父div和选择文本。

编辑：

仔细查看您的代码，我发现了一些问题。第一件事是你使用onmousemove事件在“外部”div中注册鼠标坐标。然后你使用onmousemove上的文件拖动到“内部”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区域。

另一个解决方案是在“外部”divs 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上时停止更新坐标。

如何阻止事件泡沫

1 个答案: