Question

首先，我设置了以下小提琴来展示我想要完成的事情，仅使用jQuery：

以下三个事件受到约束：

$('.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缺乏真正支持的不足。只要鼠标进入或离开子元素，鼠标悬停就会触发，而只有当鼠标进入绑定事件的DOM元素2时，鼠标中心才会触发。

然后我在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都会触发？为什么不点击射击呢？非常感谢解释或解决方法。

Answer 1

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

我相信事件的效果是一样的。在骨干版本中，每次模型更改时都会重新渲染整个视图。因此，每次鼠标移动时它都会渲染一个新div，因此它会注册一个新的“mouseenter”事件。这也可以防止“点击”事件被触发，因为点击会在“mousedown”之后触发“mouseenter”，所以当你有一个'mouseup'事件时，它就会与你点击时的元素不同。在jquery版本中，你只是改变了相关的属性，这也是我在这种情况下会做的。

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

Mouseenter或mouseover可防止在Backbone / Marionette应用程序中点击

1 个答案: