Javascript 在主干网中有条件地绑定事件-移动或桌面

为了便于阅读，我将所有内容都放在

initialize

函数下。 这里有什么问题吗？警报被触发，因此它不是条件。 我隐藏了共享操作，并希望在桌面上悬停显示它们，并在手机上点击，因为悬停是不可能的。 我是不是遗漏了什么？

console.log（）

不会抛出任何错误

App.Views.Title = Backbone.View.extend({

initialize:function(){

    _.bindAll(this,"stickToTop");
    this.template = _.template($("#title").html());
    this.render();
    $(window).scroll(this.stickToTop);

    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
    var share = this.$(".share");

    if(isMobile){

        // alert('mobile')
        share.on('click' , this.shareMobile , this);

    }else{
        // alert('not mobile')
        share.on('hover' , this.shareDesktop , this);

    }

},
...

---

嗯。。您是否定义了$share，然后使用share.on（no$）

我认为问题可能在于您使用jquery方式而不是主干方式绑定事件

我建议您尝试以下方法：

if(isMobile){

    // alert('mobile')
    this.delegateEvents({"click .share" : "shareMobile"});

}else{
    // alert('not mobile')
    this.delegateEvents({"hover .share" : "shareDesktop"});

}

希望这有帮助

-------更新-------

我自己测试过，你可以用一种非常漂亮的方式来做

首先从initialize方法中删除所有isMobile和委托事件垃圾，它只是把它弄得乱七八糟！然后制作主干。将事件哈希视为返回事件哈希的函数（是的，您可以这样做！）

---

瞧

我将这样做：

App.Views.Title = Backbone.View.extend({

    events : {
      'hover .mobile .share' : 'shareMobile',
      'click .desktop .share' : 'shareDesktop'
    },

    initialize:function(){

        //stuff...

        var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

        if(isMobile){
           this.$el.addClass('mobile');
        }else{
           this.$el.addClass('desktop');
        }

    }
    //stuff
});

---

哦！不，不是那样，复制/粘贴错误，已经更新了！谢谢伟大的它工作得很好。。。我没有在文档中看到它。刚刚学到了一些新东西。如果在doc.ready之后未声明视图，则events属性中的项无法正常工作。这个.delegateEvents是一个更具idomatic的主干，那么我是如何绕过它的呢？如果你想了解更多，请退出更新，我自己也学到了一些东西！令人惊叹的！我希望我能再给你一个+1。谢谢精彩更新，返回事件哈希。我一直在努力解决这个问题，但我觉得它更具可读性，并且与事件的主干声明一致。但是我更喜欢@jake的方法，因为所有逻辑都发生在事件函数中，并返回对象，而不会扰乱初始化函数或添加其他类，我猜你的用户代理regex中缺少了

windowsphone

App.Views.Title = Backbone.View.extend({

    events : {
      'hover .mobile .share' : 'shareMobile',
      'click .desktop .share' : 'shareDesktop'
    },

    initialize:function(){

        //stuff...

        var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

        if(isMobile){
           this.$el.addClass('mobile');
        }else{
           this.$el.addClass('desktop');
        }

    }
    //stuff
});