主干事件散列vs jquery事件声明

Question

如果我在Backbone视图的'events'散列中声明我的事件，像这样:

    events: {
        'mouseenter #socialMediaContainer': 'showSocialMediaLinks',
        'mouseleave #socialMediaContainer': 'hideSocialMediaLinks',
        'mouseenter #socialMediaContainer .links li': 'emphasizeSocialMediaLink',
        'mouseleave #socialMediaContainer .links li': 'resetSocialMediaLink',
    },
    // Never gets fired
    showSocialMediaLinks: function (e) {
        alert('mouse enter SM');
    },
    // Never gets fired
    hideSocialMediaLinks: function (e) {
        alert('mouse leave SM');
    },
    // Works fine
    emphasizeSocialMediaLink: function (e) {
        alert('emphasize SM');
    },
    // Works fine
    resetSocialMediaLink: function (e) {
        alert('reset SM');
    },

前两个事件未能触发，但后两个可以正常工作。我能看到的唯一区别是选择器指定了一个子元素(例如:#socialMediaContainer .links li，但我不确定为什么这会产生任何差异。

相关的HTML来源如下:

    <div id="socialMediaContainer">
        <ul class="links">
            <li><a href="#"><img src="/Content/images/socialmedia/linkedin.png" alt="LinkedIn" /></a></li>
            <li><a href="#"><img src="/Content/images/socialmedia/tumblr.png" alt="Tumblr" /></a></li>
            <li><a href="#"><img src="/Content/images/socialmedia/twitter.png" alt="Twitter" /></a></li>
            <li><a href="#"><img src="/Content/images/socialmedia/googleplus.png" alt="Google+" /></a></li>
            <li><a href="#"><img src="/Content/images/socialmedia/facebook.png" alt="Facebook" /></a></li>
        </ul>
        <div class="shareTab">
            <div>Share</div>
        </div>
    </div>

如果我在这个视图中添加一个initialize()方法，并在那里设置事件处理程序，它们工作得很好:

    initialize: function() {
        $('#socialMediaContainer').on('mouseenter', this.showSocialMediaLinks);
        // etc...
    },

，但理想情况下，我希望能够只使用事件散列一致性。你知道为什么前两个事件没有关联，而后两个事件有关联吗?对于它的价值，我还尝试使用this.showSocialMediaLinks作为事件散列中的值，以及字符串'showSocialMediaLinks'。

我想我上面已经包括了所有相关的信息，如果你还需要什么诊断，请告诉我。谢谢。

Answer 1

我假设您通过将其附加到#socialMediaContainerdiv来初始化您的视图。示例:

var myView = new MyView({
   el: $('#socialMediaContainer')
});

通过这样做，所有的事件将相对于#socialMediaContainerdiv。

要解决这个问题，可以这样做:

events: {
    'mouseenter': 'showSocialMediaLinks',
    'mouseleave': 'hideSocialMediaLinks',
    'mouseenter .links li': 'emphasizeSocialMediaLink',
    'mouseleave .links li': 'resetSocialMediaLink',
},

对于以下jQuery事件:

$('#socialMediaContainer').on('mouseenter', this.showSocialMediaLinks);

这是有效的，因为它不是相对于#socialMediaContainerdiv。它本质上是全局的。

对我来说奇怪的是，当你这样做时，最后两个事件有效:

events: {
    'mouseenter #socialMediaContainer .links li': 'emphasizeSocialMediaLink',
    'mouseleave #socialMediaContainer .links li': 'resetSocialMediaLink',
},

老实说，我不知道为什么会这样。但我测试过了，对我也有效。可能是bug?