0

如果我在 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'。

我想我已经包含了上面所有的相关信息，如果您需要其他任何诊断信息，请告诉我。谢谢。

4

1 回答 1

2

我假设您通过将视图附加到#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',
},

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

于 2013-06-21T09:53:08.763 回答