backbone.js – Backbone – View触发mouseout事件,即使它在root内部.

使用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           
    });

如何解决这个孩子触发’鼠标问题？

解决方法

尝试 mouseenter和 mouseleave而不是鼠标悬停和mouSEOut.