移动浏览器上的 Javascript / jQuery 页面更改事件

我正在设计一个移动网站，同时考虑所有领先的浏览器 - Safari、Chrome、Dolphin、Opera。

我想显示一个“正在加载”元素页面导航/更改/请求新页面.

我无法在锚标签上使用点击事件，因为有很多锚标签存在preventDefault();.

我尝试了以下方法：

$(window).on('beforeunload', function() { ... });

但它不起作用Dolphin or Opera.

有人可以建议一个跨浏览器解决方案?

--

EDIT: 我意识到我问的问题不太清楚，抱歉。我在这里创建了一个小提琴-http://jsfiddle.net/hiteshpachpor/7dadA/5/ http://jsfiddle.net/hiteshpachpor/7dadA/5/根据响应。该示例利用了事件冒泡。

现在这是我面临的问题。我会展示那个装载机（$('.jacket').show();）每次页面更改/导航时。但我不希望它在单击链接时显示；我想在我的页面上执行其他操作。现在，添加$('.jacket').hide();所有此类操作中的线完全足够，但出于扩展原因，它不会非常理想。

这就是我评估的原因'beforeunload'方法，但没有运气，因为它不跨浏览器兼容。

有什么好的建议来解决这个问题吗？

我认为你想要实现的是基本的 AJAX 请求？但你的做法是错误的。相反，您可以使用 div 加载请求的页面，然后设置阿贾克斯启动 https://api.jquery.com/ajaxStart/处理程序来显示您的加载消息。

你的页面标记看起来像

<nav>
  <button data-url="homeURL">Home</button>
  <button data-url="anotherURL">Other</button>
</nav>
<div id="loadhere"></div>

结果 jquery 将是这样的：

//on button click
$('nav button').click(function(){
  //set the url 
  url = $(this).attr('data-url');
    //load the page
    $('#loadhere').load(url);
});

//ajax start handler
$(document).ajaxStart(function(){
  $('#loadhere').text('LOADING');
});

这是一个示例代码笔 http://codepen.io/lukeocom/pen/dktsB

希望这可以帮助