javascript - 为什么 .on() 方法不执行第一个处理程序？

Question

var x;
userList.on( "mouseover", "li", function(e) {
    console.log('1');
    x = setTimeout( function() { 
        doThis();
    }, 700);
},function(){
    console.log('3');
    clearInterval(x);
});
userList.on( "mouseleave", "li", function(e) {
    showProfile.css('display', 'none');
});

现在，每当我将鼠标悬停在用户列表上时，它都会向我显示 console.log('3') 在这种情况下我做错了什么？

Answer 1

您似乎将接受 2 个处理程序的 hover 方法(一个用于 mouseenter ，一个用于 mouseleave 事件)与 混淆了>on 方法。您应该只将一个回调函数传递给 on 方法。本例中的第一个函数用作可选的 data 参数，第二个函数用作处理程序:

.on( events [, selector ] [, data ], handler )

event 对象的

data 属性引用传递的函数。您可以使用 () 调用运算符来调用该函数:

userList.on( "mouseover", "li", function(e) {
    console.log('1');
    x = setTimeout( function() { 
        doThis();
    }, 700);
},function(event) {
    event.data(); // calls the first function
    // ...
});

另请注意，mouseenter 和 mouseover 是两个不同的事件。您应该听 mouseover/mouseout 或 mouseenter/mouseleave。

对于清除由setTimeout函数设置的超时，您应该使用clearTimeout，clearInterval用于清除由setInterval<设置的间隔 函数。

var x;
userList.on({
   mouseenter: function() {
       x = setTimeout( function() { 
          doThis();
       }, 700);
   },
   mouseleave: function() {
      clearTimeout(x);
      // showProfile.css('display', 'none');
      // ...
   }
}, "li");