在chrome中，< use>当事件定义在目标上时，mouseenter事件在元素上触发，其他事件不触发

ehxuflar 于 2023-06-27 发布在 Go

关注(0)|答案(1)|浏览(108)

我有一个情况，嵌入式SVG中的元素 A 定义了mouseenter和mouseleave事件。有一个单独的<use>元素引用 A。由于某种原因，在Chrome（和其他Chrome浏览器）中，mouseenter事件会在<use>元素上触发，而其他事件（如mouseleave或click）则不会。
我认为事件不应该跟随href链接，因为<use>元素在页面上可能有完全不同的含义。
有没有好的方法来防止这种行为？
我希望避免使用诸如克隆元素之类的变通方法，而不是依赖于<use>。在特定的应用程序中，可以通过编程方式更改目标元素，从而允许<use>元素反映更改。此外，它允许<use>元素被重定向，从而在界面中显示不同的元素。
下面是一个简单的例子来演示这个问题：

let circle = document.getElementById("circ");

    circle.addEventListener("mouseenter",()=>{ //fires on use
        circle.setAttribute("fill", "red")
    });

    circle.addEventListener("mouseleave",()=>{ //does not fire
        circle.setAttribute("fill", "black")
    });

   circle.addEventListener("click",()=>{ //does not fire
        circle.setAttribute("fill", "green")
    });

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GUI</title>
</head>

<body style="">
<div id="gui">

<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="50" ry="50" id="circ"></ellipse>
  <use href="#circ" x="200"></use>
</svg>

</div>
</body></html>

google-chrome

来源：https://stackoverflow.com/questions/76526985/in-chrome-mouseenter-event-fires-on-use-element-when-event-defined-on-target

1条答案

按热度按时间

yjghlzjz1#

只有一个ID为circ的元素，它就是要添加事件侦听器的元素。最重要的是，以下内容适用于use元素：
但是，这些克隆的元素示例仍然链接到引用的源，并反映原始元素中的DOM变化。此外，在被引用元素的范围中应用的所有样式规则也适用于克隆的阴影树的范围。文档结构- SVG 2
因此，use元素反映了原始元素发生的情况。您需要侦听use元素上的事件。我更喜欢将事件侦听器添加到父元素（这里是SVG本身），然后测试事件发生在哪个元素上。使用onmouseout代替mouseleave。

let svg01 = document.getElementById("svg01");

svg01.addEventListener("mouseenter", e => {
  if(e.target.nodeName == "use"){
    e.target.setAttribute("fill", "red");
  }
}, true);

svg01.addEventListener("mouseout", e => {
  if(e.target.nodeName == "use"){
    e.target.setAttribute("fill", "black");
  }
});

svg01.addEventListener("click", e => {
  if(e.target.nodeName == "use"){
    e.target.setAttribute("fill", "orange");
  }
});

<svg id="svg01" height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <ellipse cx="100" cy="100" rx="50" ry="50" id="circ"></ellipse>
  </defs>
  <use href="#circ" x="0"></use>
  <use href="#circ" x="200"></use>
</svg>

赞(0）回复(0）举报 2023-06-27

我来回答

在chrome中，< use>当事件定义在目标上时，mouseenter事件在元素上触发，其他事件不触发

1条答案

相关问题

热门标签

最新问答