首页 > js如何判断鼠标在元素之上稍有停顿,进而动作?

js如何判断鼠标在元素之上稍有停顿,进而动作?

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


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

不过如果你想实现的话,可以在 mouseovermouseleave 事件里处理。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/


CSS3 transition

【热门文章】
【热门文章】