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.