如何防止单击电话号码时触发“ onbeforeunload”？

Question

我有一个响应式Web应用程序，我希望用户能够单击电话号码对其进行拨号。

此外，在页面加载过程中，我想显示"Please wait while loading..." 。

要获取"Please wait while loading..."以在页面加载时显示，我具有以下javascript代码

$(function () {

  // #Waiting is visible by default, when the page finish loading, hide the loading
  $("#Waiting").fadeOut(500);

    window.onbeforeunload = function () {
      // When a user navigates away, show the loading
      $("#Waiting").fadeIn(500);
    };
});

从上面的代码中，您会注意到默认情况下“加载”页面是可见的。 页面加载完成后，我将其淡出。 此外，当页面卸载时，我将显示“正在加载”页面，直到重定向用户为止。

直到用户单击“单击呼叫”按钮，以上代码才能正常工作。 当前，当用户单击“单击通话”按钮时，“加载”页面显示出来，并且永远不会消失。

由于“点击通话”实际上并未使用户离开页面，因此我想防止触发onbeforeunload事件，该事件阻止显示“正在加载”页面！

这是我的HTML标记

<body>

     <div id="Waiting">Please wait while loading...</div>

     <a href="tel:+1-800-123-4567" class="btn btn-lg btn-danger btn-block click-to-call">
         <strong>Call Now</strong>
     </a>

</body>

单击单击通话按钮时，如何防止onbeforeunload触发？

Answer 1

看来您可以访问引起onbeforeunload从event.target.activeElement触发的元素

您应该能够将onbeforeunload处理程序编辑为以下内容。

window.onbeforeunload = function (event) {

    if (event && event.target && event.target.activeElement && event.target.activeElement.tagName.toLowerCase() === 'a' && event.target.activeElement.href.indexOf('tel:') > -1) {

        return;
    }

    // When a user navigates away, show the loading
    $("#Waiting").fadeIn(500);
};

上面的代码评估活动元素。 如果active元素是带有包含tel:的href的链接，则我们不执行任何操作或不显示Waiting元素。

Answer 2

这就是我用来实现该功能的方式。 仅当单击例外元素（在您的情况下，此电话链接）时，我才更改有效值。

var valid = false;
window.onbeforeunload = function() {
    return valid?undefined:"";
};

如何防止单击电话号码时触发“ onbeforeunload”？

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-09-13 21:34:02

解决方案2
0 2019-09-13 20:46:40

如何防止单击电话号码时触发“ onbeforeunload”？

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-09-13 21:34:02

解决方案2 0 2019-09-13 20:46:40

解决方案1
2 已采纳 2019-09-13 21:34:02

解决方案2
0 2019-09-13 20:46:40