Привязка событий условно в магистральном-мобильном или настольном
Чтобы облегчить чтение, я помещаю все под функцию initialize
.
Здесь что-то не так? Тревога срабатывает, так что это не условие.
У меня есть скрытые действия share и я хотел бы показать их при наведении на рабочий стол и нажать на мобильный телефон, учитывая невозможность наведения.
Я что-то упустил?
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);
}
},
...
3 ответа:
Я думаю, что проблема может заключаться в том, что вы связываете события jQuery-способом, а не магистральным способом, используя delegateEvents.
Я предлагаю вам попробовать следующее:
if(isMobile){ // alert('mobile') this.delegateEvents({"click .share" : "shareMobile"}); }else{ // alert('not mobile') this.delegateEvents({"hover .share" : "shareDesktop"}); }
Надеюсь, это поможет.
------- обновление -------
Я проверил это сам, вы можете сделать это очень красивым способом!
Сначала удалите все, что является мобильным и делегировать события дерьмо из вашего метода инициализации, он просто загромождает его! Затем сделайте позвоночник.Просмотр хэша событий в виде функция, которая возвращает хэш событий (да, вы можете это сделать!)
events: function() { // check for the mobility HERE! var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); var events_hash = { // insert all the events that go here regardless of mobile or not }; if (isMobile) { _.extend(events_hash, {"click .share": "shareMobile"}); } else { _.extend(events_hash, {"hover .share": "shareDesktop"}); } return events_hash; }
И вуаля!
Я сделаю это следующим образом:
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 });