主干事件哈希与 jquery 事件声明

Question

如果我在 Backbone 视图的“事件”哈希中声明我的事件，如下所示：

    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

我假设您通过将视图附加到 #socialMediaContainer div 来初始化视图。示例：

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

通过这样做，您的所有事件都将与#socialMediaContainer div 相关。

要解决此问题，您可以这样做：

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

至于下面的jQuery事件：

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

之所以有效，是因为它与#socialMediaContainer div 无关。它本质上是全球性的。

对我来说奇怪的是，当你这样做时，最后两个事件起作用了：

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

老实说，我不确定为什么会这样。但我对其进行了测试并为我工作。可能是错误？