Question

我正在将以下D3事件注册到SVG元素。

为了解释这是什么，请考虑当我将鼠标悬停在特定区域时，我会在该区域上呈现一个随着鼠标移动而显示的圆形元素。

当我移动该区域的 out 时，圆圈会被隐藏，当我向后悬停时，它会再次显示。 目标是点击该圈子以执行功能 。这是事情不起作用的地方。

鼠标输出事件总是在点击之前被触发，并且由于鼠标输出隐藏了对象，因此错过触发点击事件

  d3.select(my_object.my_circle)
        .data([{ "my_object": this }])
        .call(FUNC_DRAG)
        .on("mouseover", FUNC_OVER)
        .on("mousemove", FUNC_MOVE)
        .on("mouseout" , FUNC_OUT)
        .on("click"    , FUNC_CLICK);

以下是处理功能。

当我在my_circle上点击时，会触发 mouseout 事件FUNC_OUT会隐藏我点击的元素，取消会有的点击事件触发了FUNC_CLICK

function FUNC_OVER(d) {
 d3.select(my_object.my_circle).style("visibility", "visible");
}

function FUNC_OUT(d) {
 console.log("mouseout");
 d3.select(my_object.my_circle).style("visibility", "hidden");
}

function FUNC_CLICK(d) {
 // this never executes;
 console.log("click");
}

理想情况下，我需要知道如何在mouseout之前强制执行点击事件。

Answer 1

考虑两个要素：

A：下层元素
B：一个“光标元素”，它悬停在元素“A”上并且应该是可见的并且只要鼠标位于元素“A”的顶部，也可以跟随鼠标位置。

通常，每次元素“B”都可见时（只要鼠标悬停元素“A”，它就会触发“A”上的mouseout事件并削减“A”跟踪移动的能力。

要解决上述问题，请使用以下样式设置cursor-element“B”：“ pointer-events：visibleStroke ”。此选项确保“B”不会调用自己的事件，除非达到其笔划/边框，这是绝对不会的，因为“A”控制“B”始终跟随鼠标位置。

D3 mousout事件在点击之前

1 个答案: