Question

如果我在Backbone视图的活动中声明我的活动＆＃39;哈希，像这样：

    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...
    },

但理想情况下，我希望能够使用事件哈希来保持一致性。任何想法为什么前两个事件似乎没有受到约束，但第二个2事件呢？对于它的价值，我还尝试使用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',
},

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

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

1 个答案: