为什么事件mouseenter在JavaScript中触发两次

Why event mouseenter fires twice in JavaScript

本文关键字：两次 mouseenter 事件 JavaScript 为什么      更新时间：2023-09-26

演示：jsfiddle

var $item = $('.item');
var $img = $item.find('img');
var handler = function(event) {
  console.log('fired');
  $img.remove(); // remove child
};
var handlerRestore = function() {
  $item.append($img);
};
/// double fired event on chrome, safari, firefox
$('.item').mouseenter(handler);
$('.item').mouseleave(handlerRestore);
// one fired event on chrome, but double fired on firefox and safari
//$('.item')[0].onmouseenter = handler;
//$('.item')[0].onmouseleave = handlerRestore;
.item {
  background: #EFEFEF;
  display: inline;
  float: left;
  height: 300px;
  margin: 0 10px 80px 0;
  position: relative;
  width: 300px;
  transition: opacity 0.6s ease;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.item img {
  margin: auto;
  max-height: 300px;
  max-width: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <img src="http://img.ifcdn.com/images/237b9b19a8cc0ea78a3b32b567423a4cd0acf77fb19b8c5a485325e2252a7b7a_1.jpg" />
</div>

问题：

  1. 为什么事件会触发两次
  2. 为什么原生事件在Chrome中触发一次，而jquery事件在Chrome上触发两次
  3. 它是如何修复的

Firefox和Safari启动了两次原生事件，也是jquery事件。我认为这是错误的。

您可以通过将事件委派给映像来解决此问题：

$('.item').on('mouseenter', 'img', handler);

更新的fiddle

解决此问题的另一种方法是在第一次和每次调用handleRestore()时仅附加一次事件。

var handlerRestore = function(){
    $item.one('mouseenter', handler);
    console.log('restored');
    $item.append($img);
};
$item.one('mouseenter', handler);

Fiddle 2

.on（）函数可以解决您的问题。您甚至可以用"document"设置事件。正如您可以在"document（）"上调用.on（）函数并设置您想要的任何事件一样。

以下是链接：http://www.w3docs.com/learn-javascript/javascript-events.html

相关文章：