jquery - Backbone - 查看元素持续触发 Mouseenter/Mouseleave

Question

对所有代码感到抱歉:S

HomeIconView 中元素上的 mouseenter/mouseleave 绑定(bind)持续不断地触发。 Firebug 在 mouseenter/mouseleave 输出中耗尽了控制台输出的行数。我只是想达到翻转效果。我必须假设这就是我使用 Backbone 的方式。我这周才开始使用。到目前为止我只在 Firefox 中进行了测试。

渲染“HomeView” View 时，“HomeIconView” View 会动态插入到“HomeView” View 中。调用 HomeIconView 的“事件”没有问题，问题是它们不断被调用!显然，鼠标实际上是进入还是离开并不重要。 Backbone 在最初的 mouseenter 之后一直到最终的 mouseleave 为止，即使没有鼠标移动，也会不断迭代 renderRollOver() 和 renderRollOut() 。 :(

我花了几天时间寻找解决方案。我所能找到的只是人们无法绑定(bind)事件的线程，而不是人们正在经历事件绑定(bind)函数调用的线程。

总的来说，我愿意接受任何更好的编码实践的建议，但特别是，请帮助我摆脱这个事件绑定(bind) mouseenter/leave 事件的痛苦。

再次，对于所有代码，我不想留下任何歧义。

...

window.HomeIconView = Backbone.View.extend ({

model: new HomeIconModel,

template: _.template([
                '<a href="#">',
                    '<div class="homeIcon" id="homeIcon-<%= id %>">',
                        '<img src="<%= homeIconSrc %>">',
                    '</div>',
                '</a>'
                ].join('')),

events: { 'mouseenter': 'renderRollOver', 'mouseleave': 'renderRollOut' },

initialize: function(md) {

    _.bindAll(this, 'render');
    this.id = 'Icon-' + md.c.id.toString();
    this.model.save(md.c);
},

render: function() {
    return this.$el.html(this.template(this.model.toJSON()));
},

renderRollOver: function() {

    console.log('rollover');
        $('#homeRollOver, #homeRollOver2').css({ 'display': 'block', 'opacity': 0.125 });
        $('#home' + this.id).stop().animate( { opacity: 1 }, 1000);
        var elOffset = $('#home' + this.id).offset();
        var elOffsetL = elOffset.left - 
                        (
                            (
                                parseInt($('#homeRollOver').css('width')) - 
                                parseInt($('#home' + this.id).css('width'))
                            ) / 2
                        );
        var elOffsetT = elOffset.top -
                        (
                            (
                                parseInt($('#homeRollOver').css('height')) - 
                                parseInt($('#home' + this.id).css('height'))
                            ) / 2
                        );
        $('#homeRollOver, #homeRollOver2').css(
            { 'marginLeft': elOffsetL, 'marginTop': elOffsetT }
        );
},

renderRollOut: function() {
    console.log('rollout');
    $('#homeRollOver, #homeRollOver2').css('display', 'none');
    $('#home' + this.id).stop().animate({ opacity: 0.125 }, 1000 );
}
});

window.HomeView = Backbone.View.extend({

model: new PreloadHomeImages,

template: _.template([
            '<div id="homeIconWrapper"></div>',
            '<div id="homeRollOver"></div>',
            '<div id="homeRollOver2"></div>'
            ].join('')),

initialize: function() {
    _PAGE_H = $(document).height();
    _PAGE_W = $(document).width();
    this.preload();
    this.render();
},

preload: function() {
    var i = 0;
    _.each(this.model.get('icons'), function(icon) {
        var tmpimg = $('<img/>');
        tmpimg.src = icon.image;
        i++;
    });
    this.$el.css('paddingTop', (_PAGE_H - 180) / 2) ;
    $('#wrapper').css('height', _PAGE_H - 50);
},

render: function() {
    this.$el.html(this.template);
    var i = 0;
    _.each(this.model.get('icons'), function(icon) {
        var iconView = new HomeIconView({
                                model: new HomeIconModel, 
                                c: { 'id': i, 'homeIconSrc': icon.image }
                            });
        $('#homeIconWrapper').append(iconView.render);
        i++;
    });
    return this;
}
}); 
...

Answer 1

HomeIconView 在实例化时需要有效的 ID。

后来，当尝试实现翻转时，我遇到了 mu_is_too_short 所描述的问题，因为元素的 z-index 导致 mouseenter/leave 也不断触发。两个答案都是对的。再次感谢@mu_is_too_short。

示例；

http://3d.rededitor.net/site2/