d3-js快速事件调用问题

d3 js fast event invoking issue

本文关键字：调用问题事件 d3-js 更新时间：2023-09-26

我想问一下，当你调用JS事件太快而它们没有触发时，你们中是否有人对d3JS有类似的问题。

例如，您有一个表，在该表中有一个div元素，您为每个单元格绑定2个事件-"mouseenter"answers"mouseleave"。用鼠标输入tooltipShow（）函数-用鼠标离开tooltipHide（）函数

<div id="tableWrapper">
<table id="myTable">
<thead>...</thead>
<tbody>
<tr><td>Some data</td></tr>
...
</tbody>
</table>
</div>
<div id="tooltip" style="visibility: hidden">Some info</div>

和D3 js函数，该函数为每个元素应用事件

function initTableEvents(){
     var tooltip = d3.select("#tooltip");
     d3.selectAll("#myTable td")
        .on('mouseenter', function(){tooltip.style("visibility", "visible")})
        .on('mouseleave',tooltip.style("visibility", "hidden"));
}

所以，如果我缓慢地在所有单元格中移动鼠标，一切都会正常工作（工具提示显示和隐藏）。但当我移动得更快一点时，工具提示会出现，但不会隐藏。"mouseleave"事件似乎触发了tooltip.style（"visibility"、"hidden"）调用，但在浏览器中没有结果。我还添加了带有时间的日志消息，以便跟踪正在发生的事情。在这种情况下，隐藏不起作用：

Log msg
show tooltip 1463473895614
hide tooltip 1463473895622
show tooltip 1463473895622
hide tooltip 1463473895640
show tooltip 1463473895641
hide tooltip 1463473895650
show tooltip 1463473895650
hide tooltip 1463473895654
show tooltip 1463473895655
hide tooltip 1463473895665
show tooltip 1463473895665
hide tooltip 1463473895670

为此，它发挥了作用：

Log msg
show tooltip 1463474018834
hide tooltip 1463474018874
show tooltip 1463474018874
hide tooltip 1463474018890
show tooltip 1463474018890
hide tooltip 1463474018916
show tooltip 1463474018916
hide tooltip 1463474018961
show tooltip 1463474018962
hide tooltip 1463474018989
show tooltip 1463474018989
hide tooltip 1463474019003
show tooltip 1463474019003
hide tooltip 1463474019034
show tooltip 1463474019034
hide tooltip 1463474019068

有人有这样/类似的问题吗？

这可能是您的问题。请参阅此链接：http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

尝试使用mouseout而不是mouseleave。

function initTableEvents(){
     var tooltip = d3.select("#tooltip");
     d3.selectAll("#myTable td")
        .on('mouseenter', function(){tooltip.style("visibility", "visible")})
        .on('mouseout',tooltip.style("visibility", "hidden"));
}

mouseout（）
1-当鼠标进入"outerBox"时，不会触发任何事件。
2-当鼠标离开"outerBox"，进入"innerBox"时，启动"outerBox"事件。
3-当鼠标离开"innerBox"，进入"outerBox"时，启动"innerBox"事件，然后是"outerBox"活动。
4-当鼠标离开到"outerBox"时，启动"outerBox"事件。
鼠标离开（）
1-当鼠标进入"outerBox"时，不会触发任何事件。
2-当鼠标离开"outerBox"，进入"innerBox"时，没有事件将开火。
3-当鼠标离开"innerBox"，进入"outerBox"时，启动"innerBox"事件。
4-当鼠标离开到"outerBox"时，启动"outerBox"事件。

具体来说，每一个都有2点。您希望事件在离开outerbox（当前单元格）并进入innerbox（下一个单元格）时激发。因此，这将使用mouseout()而不是mouseleave()

页面示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
	#mouseout-outerBox1, #mouseleave-outerBox1,
	#mouseout-outerBox2, #mouseleave-outerBox2{
		margin:8px;
		border:1px groove #999966;
		background-color : #999966;
		width:150px;
		height:150px;
		color:white;
	}
	#mouseout-innerBox2, #mouseleave-innerBox2{
		margin:8px 8px 8px 16px;
		border:1px groove #0000FF;
		background-color : #0000FF;
		width:100px;
		height:100px;
		color:white;
	}
	span{
		padding:8px;
	}
	.content{
		width:500px;
		height:250px;
	}
	.container1{
		float:left;
		padding-right:16px;
	}
</style>
</head>
<body>
  <h1>jQuery mouseout() vs mouseleave() example</h1>
<div class="content">
  <div class="container1">
	  <span>mouseout() - no child element</span>
	  <div id="mouseout-outerBox1">OuterBox
	  </div>
	  <span id="mouseout-msg1">#mouseout is fired : 0</span>
  </div>
  <div class="container1">
  	  <span>mouseleave() - no child element</span>
	  <div id="mouseleave-outerBox1">OuterBox
	  </div>
	  <span id="mouseleave-msg1">#mouseleave is fired : 0</span>
  </div>
</div>
<div class="content">
  <div class="container1">
	  <span>mouseout() - with child elements</span>
	  <div id="mouseout-outerBox2">OuterBox
	  	<div id="mouseout-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseout-outer-msg2">#mouseout outer is fired : 0</span>
          <br/>
	  <span id="mouseout-inner-msg2">#mouseout inner is fired : 0</span>
  </div>
  <div class="container1">
  	  <span>mouseleave() - with child elements</span>
	  <div id="mouseleave-outerBox2">OuterBox
	  	<div id="mouseleave-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseleave-outer-msg2">#mouseleave outer is fired : 0</span>
          <br/>
	  <span id="mouseleave-inner-msg2">#mouseleave inner is fired : 0</span>
  </div>
</div>
<script type="text/javascript">
//example 1
var mouseout1=1;
$('#mouseout-outerBox1').mouseout(function(event) {
  $('#mouseout-msg1').text('#mouseout is fired : ' + mouseout1++)
});
var mouseleave1=1;
$('#mouseleave-outerBox1').mouseleave(function(event) {
  $('#mouseleave-msg1').text('#mouseleave is fired : ' + mouseleave1++)
});
//example 2
var mouseoutouter2=1;
$('#mouseout-outerBox2').mouseout(function(event) {
  $('#mouseout-outer-msg2').text('#mouseout outer is fired : ' + mouseoutouter2++)
});
var mouseoutinner2=1;
$('#mouseout-innerBox2').mouseout(function(event) {
  $('#mouseout-inner-msg2').text('#mouseout inner is fired : ' + mouseoutinner2++)
});
var mouseleaveouter2=1;
$('#mouseleave-outerBox2').mouseleave(function(event) {
  $('#mouseleave-outer-msg2')
         .text('#mouseleave outer is fired : ' + mouseleaveouter2++)
});
var mouseleaveinner2=1;
$('#mouseleave-innerBox2').mouseleave(function(event) {
  $('#mouseleave-inner-msg2')
         .text('#mouseleave inner is fired : ' + mouseleaveinner2++)
});
</script>
</body>
</html>

我也建议将mouseenter更改为mouseover。我想我还没有使用过mouseenter和mouseleave，但我相信总有一天会有需求的。