个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想问一下你们中是否有人在使用 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
如何更改循环中变量的名称？比如 number1 、 number2 、 number3 、 number4 ？ var array = [2,4,6,8] func ap ( number1: Int
我想设置 View 的背景颜色并在一定延迟后将其更改为另一种颜色。这是我的尝试方式: print("setting color 1") self.view.backgroundColor = UICo
我在使用 express-session 时遇到问题。 session 数据不会在请求之间持续存在。 正如您在下面的代码中看到的那样，/join 路由设置了一些 session 属性，但是当 /sur
我试图从叶渲染器获得一个非常简单的结果，用于快速 Steam 的 for 循环。 我正在上传叶文件 HTML，因为它不接受此处格式正确的代码 - 下面的pizza.swift代码- import
你们中有人有什么好的链接可以与我分享吗？我正在寻找一个 FAST 程序员编辑器，它可以非常快速地打开包含超过 100, 000 行代码的文件？我目前正在使用记事本自动取款机，打开一个 29000 行长
我现在正在处理眼动追踪数据，因此拥有一个巨大的数据集(想想数百万行)，因此希望有一种快速的方法来完成此任务。这是它的简化版本。 数据告诉您眼睛在每个时间点正在查看的位置以及我们正在查看的每个文件。 X
我是新手，想为计时器或其他设备选择提示音。 如何打开此列表，以选择其中一种声音？ Alert sound list 最佳答案 您将无法在应用中使用系统声音。 但是，您可以包括自己的声音文件，并将其显示
我编写了以下代码来构建具有顺序字符串的数组。 它的工作方式与我预期的一样，但我希望它能更快地运行。有没有更有效的方法在PowerShell中产生我想要的结果？ 我是PowerShell的新手，非常感谢
我有一个包含一些非唯一行的矩阵，例如: x 尝试 y <- rle(apply(x, 1, paste, collapse = " ")) # y$lengths is the vector con
我的函数“keyboardWillShown”有问题。所以我想要的是菜单打开时，菜单正好出现在键盘上方。它可以在Iphone 8 plus，8、7、6上完美运行。但是，当我在模拟器上运行Iphone
我正在尝试通过Swift 5中的HTTP get方法从API提取数据。它在启动时成功加载了数据，但是当我刷新页面时，它说“索引超出范围”，这是因为数据是不再会在我的日志中读取，因此索引中没有任何内容。
我想做什么: 从我的数据库中获取时间戳并将其转换为用户的时区。 我的代码: let tryItNow = "\(model.timestampName)" let format = D
给定字体名称和字体大小，如何查找字符串的宽度(CGFloat)？ (目标是将UIView的宽度设置为足以容纳字符串的宽度。) 我有两个字符串:一个重复“1”，重复36次，另一个重复“M”，重复36次。
我正在尝试解析此JSON ["Items": ( { AccountBalance = 0; AlphabetType = 3; Description = "\U0631\U
我在UINavigationBar内放置了一个UILabel。 我想根据navigationBar的高度增加该标签的字体大小。当navigationBar很大时，我希望字体大小更大；当滚动并缩小nav
我想将用户输入限制为仅有效数字并使用以下内容: func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, rep
目前我有一个包含超过 100.000 张图像的数据库，它们大小不一或类似，但我想为我的公司制作以下内容: 我插入/上传一张图片，系统返回最有可能相同的图片。我不知道使用什么算法，但它需要快速。我可以预
在我的 swift 项目中，我有一个按钮，我想在标签上打印按下该按钮的时间。 如何解决这个问题？ 最佳答案 添加到DHEERAJ的答案中，您只需在func press(sender: UIButton
我必须发表评论，尝试在解析中导入数组。然而，有一个问题。 当我尝试从 Parse 加载数组时，我的输出是 ("Blah","Blah","Blah")这是一个元组...而不是一个数组 TT... 如何
我的应用程序有一个名为 MyDevice 的类，我用它来与硬件通信。该硬件是可选的，实例变量也是可选的: var theDevice:MyDevice = nil 然后，在应用程序中，我必须初始化设备
我是一名优秀的程序员,十分优秀！