Mouseenter 或 mouseover 可防止在 Backbone/Marionette 应用程序中触发单击答案

【问题标题】：Mouseenter or mouseover prevents click from firing in Backbone/Marionette applicationMouseenter 或 mouseover 可防止在 Backbone/Marionette 应用程序中触发单击
【发布时间】：2013-10-17 01:41:41
【问题描述】：

首先，我设置了以下 Fiddle 来展示我想要完成的事情，只使用 jQuery：

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

绑定了以下三个事件：

$('.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 正在弥补浏览器供应商缺乏对 mouseenter 的真正支持。 Mouseover 在鼠标进入或离开子元素时触发，而 mouseenter 仅在鼠标进入绑定事件的 DOM 元素二时触发。

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

http://jsfiddle.net/PhXLf/

事件在 Marionette.ItemView 中是这样绑定的：

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

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

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

【问题讨论】：

标签： javascript jquery backbone.js marionette

【解决方案1】：

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

我相信这些事件是一样的。在主干版本中，每次模型更改时都会重新渲染整个视图。因此，每次鼠标移动时它都会呈现一个新的 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'));
    },

【讨论】：

如果可以的话，我会支持你，ne8il。非常感谢您的回答，这很有意义。