6

使用 backbokne.js，视图的 mouseover 和 mouseout 事件不会像我期望的那样工作：

在此处输入图像描述

红色部分（根类 div）是名为 info-box 的内部 div 的父级。当鼠标从根移动到信息框时，它会触发根的“mouseout”事件，即使信息框是根的孩子。但是，当我的光标移动时，我想留在根目录内

这是我非常基本的 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           
    });

我该如何解决这个孩子触发'mouseout of parent 问题？

4

3 回答 3

12

尝试mouseenterandmouseleave而不是mouseoverand mouseout。

于 2013-06-24T19:23:01.023 回答
0

更改您的事件，以便他们委托给.info-box班级：

'mouseover .info-box': 'boxMouseOver',
'mouseout .info-box': 'boxMouseOut'
于 2013-06-24T18:53:24.797 回答
0

我怀疑当您从父 div 移动到内部 div 时是否有可能避免 mouseout 事件，但是，它会再次触发 mouseover 事件......

话虽如此，当您为您的视图声明事件时，建议指定选择器......

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

我在jsFiddle上做了一个这样的样本......

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

于 2013-06-24T19:15:31.423 回答