Question

我想拖放到元素，我不希望这个元素的父元素捕获click或drag事件，所以我使用了泡泡模型，但是我想拖动的元素包含一个拥有的孩子这个元素的大小（宽度，高度，左边......）相同。

例如：

<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/

Answer 1

但它正在冒泡。这就是文档开始接收事件的原因。您遇到的问题是event.target引用了单击的对象，而event.currentTarget引用了对象侦听，其中没有一个是您的div。

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

Check it out.

Answer 2

如果您将图片指定为background-image的{{1}}，请移除DIV拖动＆amp; drop work：http://jsfiddle.net/HxaJ4/

浏览器事件不会冒泡

2 个答案: