如何防止SVG在其他触发Mouseleave的其他部门之上

发布于 2025-01-26 15:12:06 字数 1711 浏览 4 评论 0原文

我对Mouseleave有问题。（React/Typescript/CSS/HTML项目）。

情况

（请参阅底部的图片）

我得到了两个div元素

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

，然后在div main svg >。

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上时，div onshover应在div main旁边显示 div> div
> div main ， DIV ONHOVER应再次消失。

第一个目标不是问题，第二个目标是：因为svg，mouseleave触发过早。

整个情况作为图片（虚线白线来自svg触发mouseleave，蓝色框将是div main）：

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

svg的更多信息

我正在使用victory js显示
svg具有属性的图形单击和指针 - 事件：无
这种情况已大大简化，但解释了我的关键问题

原文

I have an issue with mouseleave. (React/Typescript/CSS/HTML project).

Situation

(see picture at the bottom)

I got two div elements

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

and I got an svg on top of 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>
)

Goal:

Upon hovering over div main, div onHover should be displayed next to div main
Upon leaving div main, div onHover should disappear again.

The first goal is no issue, the second one is: Because of the svg, mouseleave is triggered too early.

The whole situation as a picture (The dotted white lines are from the svg which trigger mouseleave, the blue box would be div main):

For other reasons, the svg can't go behind div main.
How can I make sure now that svg lines don't trigger mouseleave?

Further Information

For the svg I'm using victory js to display graphs
That svg has the property click through and pointer-events: none
This situation is heavily simplified but explains my key problem

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半岛未凉 2025-02-02 15:12:06

您是否尝试将指针events：无;添加到该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>

Did you try to add pointer-events: none; to that SVG? Here is an example (green box does not fire any event but the blue one does):

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>

回复收藏 0 原文

放赐 2025-02-02 15:12:06

Pointer-Events：无需要在CSS中设置属性

，但是更现代的（非常性能）的方法是使用Pointerevent而不是MouseEvent，而不是将事件绑定到所需的元素。所有其他元素听众根本不会开火。

element.setPointerCapture(ev.pointerId)

the pointer-events: none property needs to be set in css

but the more modern(and very performant) way is to use a PointerEvent instead of MouseEvent and bind the event to the desired element.. that way all other element listeners dont fire at all..