Question

我正在尝试处理多个HTML元素上的鼠标进入/离开事件。我有多个HTML元素，我想在鼠标进入或离开这一特定元素组时触发一个事件。注意：我不能在一个父div中“分组”这些元素。

<div id="d1" style="width:100px; height:100px; background-color:red"></div>
<div id="d2" style="width:100px; height:100px; background-color:blue"></div>
<div style="width:100px; height:100px; background-color:green"></div>
<div id="result">result</div>

$(function(){
    $('#d1, #d2').mouseenter(function(){
          $('#result').html('enter ' + Math.random()); //random to distinguish subsequent events
    });

     $('#d1, #d2').mouseleave(function(){
          $('#result').html('leave ' + + Math.random());
    });

});

当鼠标进入div＃d1或＃d2并离开＃d1或＃d2

时，应该触发

事件

Answer 1

通过使用类而不是id来简化所有内容，并使用css属性而不是内联css来获得更清晰的HTML。

根据你上面的评论，我猜你不想在从一个div移动到另一个div时发射mouseleave，而只是在离开所有div时。使用e.toElement || e.relatedTarget添加以检查和限制代码的调用时间。

＆＃13;

$(function(){
    $('.mouseWatch').mouseenter(function(){
          $('#result').html('enter ' + Math.random()); 
    });

     $('.mouseWatch').mouseleave(function(e){
          // get new element that is now hovered
          var element = e.toElement || e.relatedTarget;
          // only call our on leave code if the user's mouse left all mouseWatch divs
          if(!$(element).hasClass('mouseWatch')){
            $('#result2').html('leave ' + + Math.random());
          }
    });

});

＆＃13;

.red{
  background-color:red;
  }
.blue{
  background-color:blue;
  }
.green{ 
  background-color:green;
  }

.mouseWatch{
  width:100px; 
  height:50px; 
  float:left; /*added to better fit the space on SO*/
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mouseWatch red"></div>
<div class="mouseWatch blue"></div>
<div class="mouseWatch green"></div><br><br><br><br>
<div id="result">result</div><br>
<div id="result2">result</div> (added second result div to better show leave vs enter)

＆＃13;

JQuery - 来自多个元素的鼠标离开事件

1 个答案: