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 ，然后查看＆＃34; 活动记录＆＃34; （你可以在桌面和手机上测试它）

注意：由于touchstart问题，我听说z-index 事件绑定的元素可能无效。您可能希望增加z-index以上的#takeSurvey和#cancelSurvey选择器的9000（fancybox为8020）

在fancybox弹出窗口内的Touchevent无法在移动设备上运行

1 个答案: