相关疑难解决方法(0)

悬停子元素时触发HTML5 dragleave

我遇到的问题dragleave是当悬停该元素的子元素时会触发元素事件.此外,dragenter再次悬停父元素时不会触发.

我做了一个简化的小提琴:http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>
Run Code Online (Sandbox Code Playgroud)

使用以下JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });
Run Code Online (Sandbox Code Playgroud)

它应该做的是通过在div那里拖动东西时使滴红色来通知用户.这样做有效,但是如果你拖入p孩子,那dragleave就会被激发而且div不再是红色.回到跌落div也不会再次变红.有必要完全移出掉落div并再次拖回它以使其变红.

dragleave拖入子元素时是否可以防止触发?

2017更新: TL; DR,查看CSS pointer-events: none;,如下面@ HD的答案中所述,适用于现代浏览器和IE11.

html javascript jquery drag-and-drop jquery-events

272
推荐指数
20
解决办法
7万
查看次数

标签 统计

drag-and-drop ×1

html ×1

javascript ×1

jquery ×1

jquery-events ×1