Question

我希望在悬停元素时执行代码。当指针消失时我什么都不想发生。这段代码完全符合我的要求：

$('li').hover(function() {
  // actions here
},
function() {
});

$('ul').hover(function() {
},
function() {
  // other actions here
});

但它很难看。我期待这个更干净的版本能够运作：

$('li').mouseover(function() {
  // actions here
});

$('ul').mouseout(function() {
  // other actions here
});

但它没有。当我将指针移到元素上时，mouseover部分会继续射击，而不是一次射击。

有什么建议吗？

Answer 1

您可以使用https://api.jquery.com/mouseenter/ mouseenter而不是mouseover

Answer 2

您可能想要使用event delegation。

这样的事情应该有效：

$('ul').on('mouseover', 'li', function() { console.log('hovered'); });

Answer 3

当我将指针移到元素上时，鼠标悬停部分会一直触发，而不是一次射击。

你可以使用一个标志只执行一次代码块，但是，这不会阻止事件多次重新触发，它只会忽略第一个事件之后的事件。

var flag = true;
$('li').mouseover(function() {
   if(flag){

   // actions here
    flag = false;
   }
});

但是，我建议调查.mouseenter()。

<强>段

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    </script>
  </head>
  <body>
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>

    <script>
      var flag = true;
      $('li').mouseover(function() {
        if(flag){
          console.log("testing");
          // actions here
          flag = false;
        }
     });

    $('ul').mouseout(function() {
     // other actions here
    });

   </script>
 </body>
</html>

Answer 4

将有效课程添加到您输入的li ....在离开ul时删除所有有效课程

$('li').mouseenter(function(){
  $(this).addClass('active');
});

$('ul').mouseleave(function(){
  $(this).find('.active').removeClass('active');
})

仅在鼠标悬停（或鼠标移除）上执行代码的最佳做法

4 个答案: