1

首先，我设置了以下小提琴来展示我想要完成的事情，只使用 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 版本），并且 click 根本没有触发。我的印象是 Backbone 使用了 jQuery 事件，但显然我错了，或者只是说“Backbone 使用 jQuery 事件”并不能完全解决幕后发生的事情。

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

4

1 回答 1

4

更新了 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'));
    },
于 2013-10-16T17:41:41.100 回答