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

您似乎对hover方法感到困惑，该方法使用mouseenter方法接受2个处理程序（一个用于mouseleave，一个用于on事件）。您应该只将一个回调函数传递给on方法。在这种情况下，第一个函数用作可选的data参数，第二个函数用作处理程序：

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

data对象的

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

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");

为什么.on（）方法不执行第一个处理程序？

1 个答案: