如何防止svg在触发鼠标的其它div上发生

Question

我对mouseleave有个问题。(React/Typescript/CSS/HTML项目)。

Situation

(见下图)

我有两个div元素

<>
   <div id="main">
   <div>
   <div id="onHover" style={{display: "none"}}>
   </div>
</>

我在div main上找到了一个div main。

return(
<svg className="click-through" pointer-events="none" width={1560} height={262}>
     <VictoryChart
         style={{
             parent: { pointerEvents: 'none' }
         }}
     >
        <VictoryArea
            style={{
                parent: { border: '1px solid #ccc', pointerEvents: 'none' }
            }}
        />
     </VictoryChart>
</svg>
)

目标：

当div main

• Upon在
• 上盘旋时，div onHover应该显示在div main旁边，div onHover应该再次消失。

第一个目标没有问题，第二个目标是:由于svg**，** mouseleave 被触发得太早了，所以太早了。

整幅图片(虚线白线来自触发svg的mouseleave，蓝色框为div main)：

​

​

由于其他原因，svg不能落后于div main。现在如何确保svg行不触发mouseleave

更多信息

使用

• 表示的svg --我使用victory js显示了svg具有click through属性的图形
• ，并且大大简化了svg的情况，但解释了我的关键问题

F 249

Answer 1

你有没有尝试将pointer-events: none;添加到SVG中？下面是一个示例(绿色框不会触发任何事件，但是蓝色的事件会触发)：

​

const wrap = document.querySelector('.mouseleave');
wrap.addEventListener('mouseleave', () => {
  console.log(".mouseleave left");
});

.wrap {
  position: relative;
}
.mouseleave {
  height: 200px;
  border: 2px solid red;
}
.p-none, .p-default {
  height: calc(100% - 2rem);
  position: absolute;
  top: 1rem;
}
.p-none {
  pointer-events: none;
  border: 2px solid green;
  left: 1rem;
}
.p-default {
  border: 2px solid cyan;
  right: 1rem;
}

<div class="wrap">
  <div class="mouseleave"></div>
  <div class="p-none">pointer events: none</div>
  <div class="p-default">pointer events: default</div>
</div>

​

Answer 2

需要在css中设置pointer-events: none属性。

但是，更现代(且性能非常好)的方法是使用PointerEvent而不是MouseEvent，并将事件绑定到所需的元素。这样，所有其他元素侦听器都不会触发。

element.setPointerCapture(ev.pointerId)