jquery如何处理分层SVG对象中的mouseover或mouseenter事件？
jquery如何处理分层SVG对象中的mouseover或mouseenter事件？
提问于 2016-06-08 21:43:54
在这个我的问题的小例子中，我希望能够在覆盖SVG对象时触发事件。在我假设的软件中，用户将能够创建可能重叠的自由格式SVG多边形，并与每个多边形相关联。当移动这些多边形SVG时，我希望将焦点切换到任何新的SVG上(不管位置)，而不会在它们之间振荡。
在这里的示例中，我希望将大SVG对象移动到鼠标上方SVG contiainer的第一个元素之前，这样就可以将较小的SVG对象放在焦点上。然而，当我通过较小的SVG时，移动到前面会触发另一个大SVG的鼠标，从而导致无休止的振荡。
有办法干净地处理这件事吗？
https://jsfiddle.net/o35906ty/2/
Javascript:
jQuery(document).ready(function($) {
function moveToBack(layerToMove) {
//console.log(layerToMove);
var Holder = $("#container");
//layerToMove.remove();
layerToMove.insertBefore(Holder.find(":first-child"));
}
$("circle").mouseenter(function(e){
console.log("mousing over " + $(this).attr("id"))
$(this).attr('fill', 'green')
moveToBack($(this));
});
$("circle").mouseleave(function(e){
console.log("mousing over " + $(this).attr("id"))
$(this).attr('fill', 'orange')
});
});HTML:
<body>
<svg id="container" height="100" width="100">
<circle id="big" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fill-opacity = .4 />
<circle id ="little" cx="50" cy="50" r="10" stroke="black" stroke-width="3" fill="blue" fill-opacity = .2 />
</svg>
</body>Stack Overflow用户
回答已采纳
发布于 2016-06-10 14:44:58
为了解决这个问题，我所做的就是为每个SVG对象分配一个边界div。在创建SVG时，我注意到了左、右、上和下像素坐标的每个极端，将它们分配给一个绝对定位的div，并生成一个缩放的z索引，以自动将SVG对象从前面的小到后面的大排序。这允许所有动态创建的堆栈SVG注释都是可显示的，并且使用DOM事件，这些事件比SVG元素少得多。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37713461
复制相关文章
相似问题
腾讯云开发者
