Question

JS：

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

问题：

为什么事件会发生两次？
为什么native-event会在chrome中触发一次，但jquery-event会在chrome中触发两次？
如何解决？

Firefox和safari也发了两次本机事件，所以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

.on（）函数可以解决您的问题。您甚至可以使用“document”设置事件。您可以在“document”上调用.on（）函数并设置您想要的任何事件。

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

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

2 个答案: