D3 mousout事件先于点击

我正在向SVG元素注册以下D3事件。D3 mousout事件先于点击

要解释这是关于什么的，请考虑当我将鼠标悬停在特定区域上时，可以看到伴随鼠标在该区域移动的圆形元素。

当我移动出该地区的圆被隐藏，当我把鼠标悬停回来它应该再次可见。 目标是点击该圆圈执行功能。这是事情不起作用的地方。

mouseout事件总是被炒鱿鱼提前点击的，而且由于对象被通过鼠标移开隐藏的，它偏出触发click事件

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，在鼠标移开事件被触发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之前执行点击事件。

来源

2015-06-20 gextra

你的CSS是什么样的？你有'指针事件：所有''在'circl e'？对我来说，它可以正常工作，如果你这样做... –

我没有使用指针事件。感谢您的建议。它确实有效，但不幸的是该元素在隐藏时是可点击的，并且在这种情况下我无法知道它何时不应该被点击（它可能被隐藏，因为我移出了该区域，但会导致它仍然是可点击的。但似乎我可以使用这种方法很好的提示 – gextra

对我而言，似乎最适合我的工作是避免使用鼠标事件隐藏对象，而是使用setTimeout（F，1000，circleObjectAndElse），它允许点击事件在被隐藏之前触发 – gextra

考虑两个元件：

一个：一个下方层元件
B：该悬停在元素“A”和应该是可见的，并按照鼠标位置，只要是“光标元件”鼠标也位于元素“A”之上。

一般而言，每次元件“B”变得可见（只要鼠标悬停元件“A”，这将触发“A” mouseOut事件和切割的“A”来跟踪运动的能力。

要解决以上，将光标定元素“B”具有以下样式：“指针的事件：visibleStroke”。该选项确保了“B”不会调用它自己的事件，除非其行程/边界到达，这是从来没有的，因为“A”控制着“B”始终在鼠标位置。

来源

2015-06-25 13:39:06 gextra

D3 mousout事件先于点击

回答

相关问题