为什么在SVG中输入/离开子元素时会触发mouseenter/mouseleave事件？
我有一个SVG，里面有更多SVG，其中包含数量可变的rect元素，所有这些都是从数据对象生成的。以下是一般层次结构：
<svg class="parent-svg">
<svg class="child-svg">
<rect />
<rect />
</svg>
<svg class="child-svg">
<rect />
<rect />
</svg>
</svg>
我已将mouseenter/mouseleave事件绑定到。子svg元素，但我发现当我的鼠标移到
以下是相关的小提琴：http://jsfiddle.net/ysim/yVfuK/4/
编辑：我试着给出<代码>。子svg包含高度和宽度，但这似乎也不起作用：http://jsfiddle.net/ysim/gMXuU/3
编辑：这是解决方案的小提琴，根据@pornel的建议修复：http://jsfiddle.net/ysim/HUHAQ/
谢谢
共有1个答案
我的猜测是. child-svg本身没有任何区域，所以没有办法直接悬停它。当鼠标离开时
SVG并没有流布局，所以子元素不会影响父元素的大小。
解决办法是：http://jsfiddle.net/gMXuU/4/
添加一个<代码>
-
更新：找到可能的原因，当我确认后，我会将其作为答案发布 我发现IE的行为很有趣。 与我在JSFIDLE上发布的示例相反，我的原始页面在背景中显示了一个图像（很抱歉省略了它，我认为它不相关）。不是作为css后台属性，而是作为img元素，位于带有mouseenter/mouseleave事件处理程序的div之前。我没有使用z-index属性（并且我已经确认使用它不会改变任何东西），我发现在这种情况下（
-
因此，我有一个#container div的简单设置，其中包含一个#field div。我还有一个不可见的#悬停范围，它跟随鼠标移动（居中）并在#field上悬停时可见。 HTML： JS公司： 当我在场地上悬停时，只要我移动鼠标，它就会触发无数的mouseenter和mouseleave（预期的mousemove）事件。这似乎是因为#悬停范围以鼠标为中心，每次移动鼠标时，我都会离开#字段并输入#
-
问题内容： 总览 我具有以下HTML结构，并且将和事件附加到了元素上。 问题 当我将文件拖到时，事件将按预期触发。但是，当我将鼠标移到子元素（例如）上时，会为该元素触发该事件，然后为该元素触发该事件。 如果我再次将鼠标悬停在该元素上，则再次触发该事件，这很酷，但是随后为刚刚剩下的子元素触发了该事件，因此执行了该指令，这并不酷。 此行为有问题的原因有两个： 我只附加＆，所以我不明白为什么子元素也要附
-
问题内容： window.onload = function(){ 这是我的代码，当我单击“文本”时，它将向您提示两次，但是当我单击该框时，该元素将仅触发一次，为什么？ 问题答案： 当您单击标签时，它会触发单击处理程序，并且您会收到警报。 但是单击标签还会自动将click事件发送到关联的输入元素，因此将其视为对复选框的单击。然后事件冒泡会导致在包含元素（即标签）上触发click事件，因此您的处理程
-
问题内容： 我正在寻找一个DOM事件，该事件可以通过JavaScript进行监听，以了解通过打开选择元素（但未更改任何选项）然后通过关闭选择元素（在页面上其他位置）来关闭该元素。 这不是选择事件，因为选择保留了焦点。同样，这不是一些其他元素或文档或事件或窗口，文档或身体。 这不是选择事件，因为选择中的任何选项都没有更改。 我不关心旧版Internet Explorer，而只是在符合标准的现代浏览器
-
我在使用Discord。js创建一个基本的Discord机器人。当bot第一次启动时，我运行获取机器人当前订阅的所有协会的列表。我将其保存到其他程序使用的数据库中。 然而，当人们从他们的公会中添加/删除机器人时，我想保留一个更新的公会列表。我意识到我可以每分钟重新运行，但这似乎效率低下。 当你的机器人被添加到公会和/或频道时，是否有触发的事件？据我所知，事件似乎针对所有已经订阅该公会的用户/机器人