Backbone - View正在触发mouseout事件，即使它在root中也是如此。

Question

使用backbokne.js，视图的mouseover和mouseout事件无法正常工作：

红色部分（根类div）是名为info-box的内部div的父级。将鼠标从root移动到信息框时，它会触发root的'mouseout'事件，即使信息框是root的子信息。但是，当光标从

移动时，我想留在根内

这是我非常基本的HTML：

<script type="text/template" id="box-template">
    <div class="root">
        <div class="info-box">
             Test title
        </div>
    </div>
</script>

以下是我的观点：

var DealViewClass = Backbone.View.extend({
    events: {
        'mouseover': 'boxMouseOver',
        'mouseout': 'boxMouseOut'
    }, 
    boxMouseOver: function(e){
        console.log('inside!');
    }
    },
    boxMouseOut: function(e){
        console.log('outside!')
    }
});

我初始化我的观点：

    var template = _.template($('#box-template').html());
    var dealView = new DealViewClass({
        model: model,
        el: template           
    });

如何解决这个孩子触发'拖出父问题？'

Answer 1

尝试mouseenter和mouseleave，而不是mouseover和mouseout。

Answer 2

更改您的活动，以便他们委派给.info-box班级：

'mouseover .info-box': 'boxMouseOver',
'mouseout .info-box': 'boxMouseOut'

Answer 3

我怀疑当你从父div移到div里面时可能会避免mouseout事件，但是，它会再次触发mouseover事件......

说，当您为View声明事件时，建议指定选择器......

...
events: {
        'mouseover .root': 'boxMouseOver',
        'mouseover .info-box': 'boxMouseOver',
        'mouseout .root': 'boxMouseOut'
    },
...

我在jsFiddle上做过这样的样本...

http://jsfiddle.net/Tn8PX/3/