Почему MouseEnter событие срабатывает дважды в JavaScript

Question

Демо: 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; 

HTML:

<div class="item"> 
    <img src="http://img.ifcdn.com/images/237b9b19a8cc0ea78a3b32b567423a4cd0acf77fb19b8c5a485325e2252a7b7a_1.jpg" /> 
</div> 

CSS:

.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; 
} 

Вопросы:

1. Почему событие срабатывает дважды?
2. Почему native-event срабатывает один раз в хроме, но jquery-event срабатывает дважды в хроме?
3. Как это исправить?

Firefox и сафари выпустили дважды родное событие и так jquery-event. Я думаю, что это неправильно.

Answer 1

Вы можете решить эту проблему путем делегирования события изображения:

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

Updated fiddle

Другим способом обойти эту проблему, чтобы прикрепить событие только один раз в первый раз, и каждый раз, когда handleRestore() является называется.

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

$item.one('mouseenter', handler); 

Fiddle 2

Answer 2

.он() может быть решение для вашего problem.You может даже установить событие с «документ» .Как вы можете позвонить .он() функции на «документ» и установите любое событие, которое вы хотите.

Вот ссылка: http://www.w3docs.com/learn-javascript/javascript-events.html