我有一个响应的网络应用程序，我希望用户能够点击一个电话号码拨号。
另外，我想在页面加载过程中显示一个"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);
};
});
从上面的代码中，您会注意到“加载”页面在默认情况下是可见的。当页面加载完成时，我将其淡出。另外，当页面卸载时，我会显示“正在加载”页面，直到用户被重定向为止。
在用户单击“点击呼叫”按钮之前，上述代码工作正常。目前，当用户点击“点击呼叫”按钮时，“正在加载”页面就会出现，而且永远不会消失。
由于“click to call”实际上并没有引导用户离开页面，因此我希望防止触发
onbeforeunload事件，从而防止显示“loading”页面！这是我的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？
最佳答案
看起来您可以访问导致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);
};
上面的代码计算活动元素。如果活动元素是包含
href的tel:链接，我们只需不显示或不显示Waiting元素。
关于javascript - 如何防止单击电话号码时触发“onbeforeunload”？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57929141/