Touchevent внутри fancybox popup не работает на мобильных устройствах

Question

Надеюсь, кто-то может помочь мне с этим. Я создал всплывающее окно, используя fancybox, который содержит две ссылки, одна из которых выводит пользователя на страницу опроса, а другая отменяет и закрывает всплывающее окно.

Он работал как ожидается на рабочем столе, однако теперь он должен работать на мобильных устройствах. Поэтому я создал переменную для обработки события касания и обновил обработчик события on.

Он по-прежнему отлично работает на рабочем столе, но когда я тестирую свой телефон, выбор ссылок ничего не делает. Кто-нибудь сталкивается с подобной проблемой? Знаете, как я могу исправить эту проблему? Предложения/советы приветствуются.

$.fancybox({ 
    modal: true, 
    content: "<div id=\"surveyDialog\"><img src=\"SurveyThumb.jpg\"><h3>" + title + "</h3><p>" + msg + "</p><div><div class=\"generic-forward-button boxed\"><a href=\"\" id=\"takeSurvey\">Yes <span></span></a></div><a href=\"\" id=\"cancelSurvey\">No, thanks</a></div></div>", 
    afterLoad: function() { 
    var clickEvent=((document.ontouchstart!==null)?'click':'touchstart'); 

    $('.fancybox-overlay').on(clickEvent, '#takeSurvey', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var survey = window.open('http://someurl.com/feedback', '_blank'); 
     survey.focus(); 
     $.cookie(cookiename, 'take-survey', { expires: 365 });//set cookie if user selects survey 
     $.fancybox.close(); 

    }); 

    $('.fancybox-overlay').on(clickEvent, '#cancelSurvey', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $.cookie(cookiename, 'refuse-survey');//set session cookie 
     $.fancybox.close(); 

    }); 
    } 
}); 

Answer 1

Они должны, однако, я хотел бы сделать некоторые корректировки в ваш код:

• связывают это событие с documentобъекта вместо наложения на FancyBox в
• использовать afterShowобратного вызова вместо afterLoad

Вот код:

var clickEvent = document.ontouchstart !== null ? 'click' : 'touchstart'; 
$.fancybox({ 
    modal: true, 
    content: "<div id=\"surveyDialog\"><img src=\"http://placehold.it/100/&text=image.jpg\"><h3>" + title + "</h3><p>" + msg + "</p><div><div class=\"generic-forward-button boxed\"><a href=\"\" id=\"takeSurvey\">Yes <span></span></a></div><a href=\"\" id=\"cancelSurvey\">No, thanks</a></div></div>", 
    afterShow: function() { 
     $(document).on(clickEvent, '#takeSurvey', function (e) { 
      // redirect to survey, focus, etc. 
      // cookie settings, etc. 
      $.fancybox.close(); 
      return false; // does both stopPropagation() and preventDefault() 
     }); 
     $(document).on(clickEvent, '#cancelSurvey', function (e) { 
      // cookie settings, etc. 
      $.fancybox.close(); 
      return false; // does both stopPropagation() and preventDefault() 
     }); 
    } 
}); 

См DEMO здесь, и проверить «журнал активности» (вы можете проверить его на рабочий стол и телефон)

ПРИМЕЧАНИЕ: Я слышал элементы, где touchstartсобытия могут быть связаны, возможно, из-за z-index вопросов. Вы можете увеличить переключателей #takeSurvey и #cancelSurvey выше 9000 (fancybox is 8020)