悬停子元素时触发HTML5 dragleave

作者

我遇到的问题是，当悬停某个元素的子元素时，会触发该元素的dragleave事件。另外，再次将鼠标悬停在父元素上时，dragenter不会被激发

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

HTML:

&lt；div id=“drag”draggable=“true”&gt；拖拽我&lt/部门&gt；
&lt；人力资源&gt；
&lt；div id=“drop”&gt；
到这里来
&lt；p&gt；儿童&lt/p&gt；
父母亲
&lt/部门&gt；

使用以下JavaScript：

$（'#drop'）.bind({
dragenter:function（）{
$（this.addClass（'red'）；
},
dragleave:function（）{
$（this.removeClass（'red'）；
}
});
$（“#拖动”）.bind({
dragstart:函数（e）{
e、 allowedEffect=“复制”；
e、 设置数据（“文本/普通”、“测试”）；
}
});

它应该做的是在拖动某个对象时，通过使dropdivred来通知用户。这是可行的，但是如果拖动到p子对象中，就会触发dragleave，并且div不再是红色。返回到dropdiv也不会使其再次变为红色。有必要将其完全移出dropdiv，然后再次拖回drop，使其变为红色

当拖动到子元素中时，是否可以防止dragleave触发

2017年更新：TL；DR，查找CSS指针事件：无如下面@H.D.的答案所述，适用于现代浏览器和IE11

你只需要保留一个引用计数器，当你得到一个dragenter时增加它，当你得到dragleave时减少它。当计数器为0时-删除该类

var计数器=0；
$（'#drop'）.bind({
牵引器：功能（ev）{
ev.preventDefault（）；//IE需要
计数器++；
$（this.addClass（'red'）；
},
dragleave:function（）{
计数器--；
如果（计数器==0）{
$（this.removeClass（'red'）；
}
}
});

注意：在drop事件中，将计数器重置为零，并清除添加的类

你可以在这里运行它

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with