Question

我想问一下你是否有人与d3 JS有类似的问题，当你调用JS事件太快而且他们没有触发时。

例如，您有一个表格，在该表格中有一个div元素，您为每个单元格绑定了2个事件 - ＆＃39; mouseenter＆＃39;和＆＃39; mouseleave＆＃39;。鼠标输入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"));
}

所以，如果我慢慢地将鼠标移动到所有细胞中 - 一切正常（工具提示显示和隐藏）。但是当我移动一点时，工具提示会出现，但不会隐藏。似乎＆＃39; mouseleave＆＃39;事件触发器和tooltip.style（＆＃34; visibility＆＃34;，＆＃34; hidden＆＃34;）调用，但浏览器没有结果。我还添加了日志消息，以便跟踪发生的事情。在这种情况下，隐藏不起作用：

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

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

Answer 1

这可能是你的问题。请看这个链接：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"));
}

鼠标移出（）

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”事件。

具体针对每一项。您希望在离开外箱（当前单元格）并进入内箱（下一个单元格）时触发事件。因此，这将使用mouseout()而不是mouseleave()

页面示例：

＆＃13;

<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>

＆＃13;

我建议您将mouseenter更改为mouseover。我不认为我曾经使用mouseenter和mouseleave，但有时我肯定会有需要。

d3 js快速事件调用问题

1 个答案: