个人中心
gpt4 book ai didi

javascript - d3 js 快速事件调用问题

转载 作者：行者123 更新时间：2023-11-30 00:09:04 25 4
gpt4 key购买 nike

我想问一下你们中是否有人在使用 d3 JS 时遇到过类似的问题，当您调用 JS 事件的速度太快而没有触发时。

例如，您有一个表格，在该表格中有一个 div 元素，您为每个单元格绑定(bind)了 2 个事件 - 'mouseenter' 和 '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 - When mouse enters the “outerBox”, no event will fire.

2 - When mouse leaves the “outerBox”, and enters “innerBox”, fire the “outerBox” event.

3 - When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event, follow by the “outerBox” event.

4 - When mouse leaves to the “outerBox”, fire the “outerBox” event.

mouseleave()

1 - When mouse enters the “outerBox”, no event will fire.

2 - When mouse leaves the “outerBox”, and enters “innerBox”, no event will fire.

3 - When mouse leaves the “innerBox”, and enters “outerBox”, fire the “innerBox” event.

4 - When mouse leaves to the “outerBox”, fire the “outerBox” event.

特别是第 2 点。您希望在离开外框(当前单元格)并进入内框(下一个单元格)时触发事件。所以这将使用 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 到目前为止，但我相信某个时候会有需要。

关于javascript - d3 js 快速事件调用问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37271036/

25 4 0
文章推荐： mysql - 子查询困惑
文章推荐： android - 点击并按住 - 怎么做？
文章推荐： mysql - 选择单列中包含多个数据的不同数据
文章推荐： android - SQLite中如何检查值是否被插入？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com