javascript - Mouseenter 或 mouseover 阻止在 Backbone/Marionette 应用程序中触发点击

Question

首先，我设置了以下 Fiddle 来展示我想要完成的工作，仅使用 jQuery:

http://jsfiddle.net/NjmjP/1/

绑定(bind)了以下三个事件:

$('.test li p').mouseenter(function() {
    var el = $(this),
        count = ++mouseenters[el.attr('id')];

    el.find('.mouseenters .count').text(count);
});

$('.test li p').mouseover(function() {
    var el = $(this),
        count = ++mouseovers[el.attr('id')];

    el.find('.mouseovers .count').text(count);
});

$('.test li p').click(function() {
    function r() {
        return Math.floor(Math.random() * 256);
    } 
    $(this).css({'background-color': 'rgb(' + r() + ',' + r() + ',' + r()});
});

根据您使用的浏览器(我使用的是 Chrome)，我们看到 jQuery 正在弥补浏览器 vendor 缺乏对 mouseenter 的真正支持。鼠标悬停在鼠标进入或离开子元素时触发，而 mouseenter 仅在鼠标进入事件绑定(bind)的 DOM 元素二时触发。

然后我在 Backbone/Marionette 中写了以下内容:

http://jsfiddle.net/PhXLf/

事件在 Marionette.ItemView 中是这样绑定(bind)的:

events: {
    'mouseover p' : 'handleMouseOver',
    'mouseenter p' : 'handleMouseEnter',
    'click p' : 'handleClick'
},

我们在这里看到 mouseenter 和 mouseover 事件都表现得很糟糕(或者至少不像表现良好的 jQuery 版本)并且点击根本没有触发。我的印象是 Backbone 使用 jQuery 事件，但显然我错了，或者只是说“Backbone 使用 jQuery 事件”并不能完全说明幕后发生的事情。

可以这么说，我对这里发生的事情感到很困惑。为什么每次鼠标在 Backbone 版本中移动时都会触发 mouseenter/mouseover？为什么根本没有点击触发？非常感谢解释或解决方法。

Answer 1

更新的 jsfiddle:http://jsfiddle.net/PhXLf/2/

我相信这些事件的运作方式是一样的。在主干版本中，每次模型更改时都会重新渲染整个 View 。因此，每次鼠标移动时它都会呈现一个新的 div，因此它会注册一个新的“mouseenter”事件。这也可以防止触发 'click' 事件，因为单击会在 'mousedown' 之后触发 'mouseenter'，因此当您有 'mouseup' 事件时，它位于与您单击时不同的元素上。在 jquery 版本中，您只需更改相关属性，这也是我在这种情况下会做的。

    rerender: function() {      
             this.$('.mouseovers .count').html(this.model.get('mouseOverCount'));
             this.$('.mouseenters .count').html(this.model.get('mouseEnterCount'));
    },