浏览器事件不冒泡答案

【问题标题】：browser event does not bubble浏览器事件不冒泡
【发布时间】：2011-08-12 02:43:15
【问题描述】：

我想对元素进行拖放，并且我不希望该元素的父级捕获单击或拖动事件，因此我使用气泡模型，但是我要拖动的元素包含拥有的孩子此元素的相同大小（宽度，高度，左...）。

例如：

<div id="div_con" style="left: 20px; top: 50px; width: 181px; height: 357px; position: absolute; z-index: 10; cursor: pointer;" class="drag">
    <img src="test.PNG" id="Over_Label_1912694_Img" style="left: 0px; top: 0px; width: 181px; height: 357px; position: relative;">
</div>

div#div_con 是我要拖动的元素。但是由于 div#div_con 和 img 的大小相同，所以用户永远不能点击 div#div_con。因为img在它上面。

所以我将 mouseDown,mouseMove,mouseUp 事件绑定到整个文档

document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

在我看来，当用户点击 div#div_con 下的 img 时，mouseDown 事件会冒泡到 div#div_con。

由于我只想拖动 div#div_con，所以我在 mouseDown 处理程序中进行了检查：

if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')
{  //do the start the move}

但它不起作用。

这是完整的例子：

http://jsfiddle.net/5SCwG/

【问题讨论】：

在整个元素上用作“拖动句柄”的元素上的掩码怎么样？

标签： javascript javascript-events

【解决方案1】：

但它正在冒泡。这就是文档开始接收事件的原因。您遇到的问题是 event.target 是指单击的对象，而 event.currentTarget 是指正在侦听的对象，而这些都不是您的 div。

您需要直接在 div 上使用事件侦听器，或者您需要获取 target.parentElement，然后将其用作 _dragElement。

Check it out.

【讨论】：

【解决方案2】：

如果您将图像指定为background-image 的background-image 并删除IMG 拖放作品：http://jsfiddle.net/HxaJ4/

【讨论】：