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

我在设计一个移动网站时，考虑到了所有主流浏览器——Safari、Chrome、Dolphin和Opera

我想在请求页面导航/更改/新建页面时显示“加载”元素

我不能在锚定标记上使用click事件，因为有许多锚定标记与

preventDefault（）一起出现

我尝试了以下方法：

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

但它在海豚或歌剧中不起作用

有人能推荐跨浏览器解决方案吗

--

编辑：我意识到我问的问题不是很清楚，抱歉。我在这里创建了一个小提琴-基于响应。该示例使用事件冒泡

现在我面临的问题是。每次页面更改/导航时，我都会显示加载程序（
$（'.jacket'）.show（）；
）。但我不希望它显示，如果一个链接被点击；我想在我的页面上执行其他操作。现在，添加
$（'.jacket'）.hide（）行将完全足够，但由于扩展的原因，它将不是非常理想的

这就是为什么我要评估
'beforeunload'
方法，但由于它不兼容跨浏览器，所以没有运气

有什么建议可以解决这个问题吗？
您可以在body元素中有一个onLoad函数，调用loading div来显示，然后将timeout设置为3秒，然后隐藏loading div并显示所有其他div/body的其余部分

编辑：
我很确定这在所有浏览器上都能用。一旦我进入电脑（现在在手机上），我会附加一段代码片段；）
 如评论中所述。但是，我更喜欢事件委派，而不是在整个dom中附加事件

// this is your original eventListener which prevents the default action (aka, navigating away)
$('#random-link').click(function(event){
    event.preventDefault();
    $('#result').text('I was clicked from random-link event.')
});

// this would be the delegated listener. It wouldn't have to be all "a" tags 
// that you respond to. It could be any css selector that causes the 
// loading message that you want.
$(window).on('click', 'a', function() {
   alert('I still bubble up.');
});

更新：

也许您不应该为“链接”触发
$（'.jacket'）.show（）

我认为您试图实现的是基本的AJAX请求？但是你走错了路。您可以改为使用div加载请求的页面，然后设置一个处理程序来显示加载消息

您的页面标记看起来像

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

这是一个

希望这有帮助
有一个jquery移动小部件。这一直使用到版本1.4

  $.mobile.loading( "show", { //show loading image
    text: "Your request is processing. please wait ...",
    textVisible: true,
    theme: "b",
    textonly: false,
  });

获取帮助。
响应您的编辑：

您可以使用
event.isDefaultPrevented（）

JSFiddle：

警告：确保分配了
$（'a'）。在其他事件处理程序之后单击（）；否则它将首先执行并将失败，因为
preventDefault（）
还不会触发。
这篇文章可能会帮助您@Devima这是一个单页应用程序还是实际的页面加载？为什么不能使用单击事件处理程序
preventDefault（）
将阻止在单击链接时更改页面，但它不会阻止事件在DOM中冒泡。@Jasper-我最初的想法也是一样的。但我的限制是：有相当多的事件使用
preventDefault（）
。随着项目的进展，我可能会在以后添加更多内容。如果我开始手动计算这些事件/元素，那么这只会使我的代码非常僵化和静态。这迫使我首先计算
onbeforeunload
事件。但它似乎在大多数移动浏览器中都不起作用。这就是为什么bounty实际上需要花费更多的时间来访问一个页面，而不是在页面开始呈现后加载整个DOM。因此，增加3秒的强制“加载”时间将不必要地降低用户体验。顺便说一句，这在所有浏览器上都适用；）对不起，我不太清楚你想要什么邪恶的巴克，谢谢上面的例子。我已经根据我的情况修改了它。请看编辑后的问题。@Hitesh我不确定我是否完全理解你的意图，但也许我更新的答案会有所帮助。邪恶的巴克，这就是我要做的。谢谢对不起，我的问题中没有提到AJAX。这是一个简单的页面导航。我意识到，使用AJAX是一种更简单的方式来实现您正在尝试的内容，并且是为简单的页面导航而设计的。无论如何，这是一个可能的跨浏览器解决方案…@Hitesh个人认为，这是最好的答案。如果我们发现我们的想法不好，为什么不换一种方式思考呢realisable@Hitesh-卢克的答案是最合适的（我投了赞成票）。。。您试图在自己的环境中控制与页面导航的交互（在开始获取数据时显示一些内容，然后在加载所有数据后隐藏并显示页面）。这是使用AJAX解决方案的典型案例，因此您应该异步加载页面，这将解决您的问题。虽然这是一个非常好的解决方案，但我接受了邪恶巴克的答案，因为它更适合我的情况。谢谢你的帮助，@lukeocom:）
//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');
});

  $.mobile.loading( "show", { //show loading image
    text: "Your request is processing. please wait ...",
    textVisible: true,
    theme: "b",
    textonly: false,
  });

$(function() {
    $('.jacket').hide();

    $('.prevent').click(function(event) {
        event.preventDefault();
    });

    $('a').click(function(event) {
        if (!event.isDefaultPrevented())
            $('.jacket').show();
    });
});