Question

我有一个简单的弹出联系表单脚本：

$(document).ready(function(){
    var popupButton = $("#contact-popup-button");
    var popupBox = $("#pop-up-contact");
    var popupBg = $("#pop-up-close-background");

    popupButton.on("click", function(){
        popupBox.addClass("slide-out");
        popupBg.fadeIn(200);
    });

    popupBg.on("click", function(){
        popupBox.removeClass("slide-out");
        popupBg.fadeOut(100);
    });

基本上，当单击按钮时，会出现div并且其后面的空间会变得模糊。如果你按下出现的div周围的空间，它将消失。现在对于移动设备，我希望在单击后退按钮时可以选择使div消失。不幸的是，我根本无法让它在实践中发挥作用。我试过这些答案：

handling back button in android from jquery
Take control of hardware back button jquery mobile

但是这两项似乎都失败了，其他人都使用插件，我想避免使用插件。在LG G2 Mini和Sony Xperia Z1上测试

Answer 1

一种方法是使用HTML5 History API。

打开弹出窗口时，您可以在打开弹出窗口之前将状态推送到历史记录堆栈： history.pushState({popupOpen: false}, "My title", "index.html"); 此方法会自动更新页面标题（在大多数浏览器实现中当前被忽略）和URL的最后一部分，它将显示在浏览器栏中。在大多数情况下，您可以在此输入您的文件名。第一个参数是一个对象，其中包含弹出状态时可以访问的数据。

只要您将状态推送到历史堆栈，当按下后退键时，浏览器不会像往常一样返回到最后一页，而是弹出堆栈上的最后一个状态。这适用于所有浏览器，但如果您只想要移动浏览器的功能，则必须在调用history.pushState之前进行浏览器检查。

要正确处理后台事件，您需要订阅popstate-Event。这可以使用以下代码完成：

window.addEventListener("popstate", function(event) {
  var data = event.state;
  if(data.popupOpen === false) {
    popupBg.trigger('click');
  }
});

您注册一个用户导航后立即触发的事件侦听器。在event.state变量中，可以再次访问在推送状态时传入的数据。

祝你好运！

让jQuery阻止回到android上

1 个答案: