javascript - js如何判断鼠标在元素之上稍有停顿，进而动作？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - js如何判断鼠标在元素之上稍有停顿，进而动作？

天蓬老师 2017-04-10 14:36:35

[JavaScript讨论组]

837

这个问题不太好表达，类似于SF的标签元素，鼠标在其上停滞一两秒才开始发起请求而如果是很快的划过则不动作。我用的是mouseover和mouseleave，但貌似实现不了这效果，大家是怎么实现的？

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

巴扎黑2017-04-10 14:38:35 2楼

我没有发现 SF 的标签元素有延迟动作啊……

不过如果你想实现的话，可以在 mouseover 和 mouseleave 事件里处理。mouseover 事件里用一个 setTimeout 延迟触发，记录下返回的 timerId，之后在 mouseleave 里用 clearTimeout 把延迟处理取消掉（如果还没触发的话）

代码大概就像这样（仅示意）

// 通过一个闭包来封闭 timerId 变量，使之不被外界访问到
(function(node) {
    var timerId = 0
    node.onmouseover = function() {
        clearTimeout(timerId)
        timerId = setTimeout(function() {
            // 这里是你想做的事情，延迟500毫秒触发
        }, 500)
    }
    node.onmouseleave = function() {
        clearTimeout(timerId)
    }
})(domNode /* 要触发相关事件的DOM元素 */)

刚注册了账号在 jsfiddle 上写了段代码试验

http://jsfiddle.net/jamesfancy/751s4m9x/2/