移动浏览器上的Javascript / jQuery页面更改事件 [英] Javascript / jQuery page change event on mobile browsers

问题描述

我正在设计一个移动网站，牢记所有主流浏览器 - Safari，Chrome，Dolphin，Opera。

我想展示一个加载元素，当页面导航/更改/新页面被请求时。

我不能在定位标记上使用点击事件，因为有很多与 preventDefault（）; 。

我尝试了以下方法：

  $（window）.on（'beforeunload'，function（）{...}）; 
  

但在 Dolphin 或 Opera 。

有人可以推荐一个跨浏览器解决方案？ p

-

编辑：我意识到在提出问题时我并不十分清楚，道歉。我在这里创建了一个小提琴 - http://jsfiddle.net/hiteshpachpor/7dadA/5/ 基于响应。该示例使用了事件冒泡。

现在，我遇到了这个问题。每次页面更改/导航时，我都会显示该加载器（ $（'。jacket'）。show（）; ）。但我不希望它显示是否点击链接;我想在我的页面上执行其他操作。现在，在所有这些操作中添加 $（'。jacket'）。hide（）; 行将完全满足要求，但对于缩放原因它不会非常理想。 p>

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

任何建议都可以解决这个问题吗？

解决方案

在评论中被提及。然而，我更喜欢事件委派，而不是将事件附加到整个dom上。

  //这是您的原始eventListener，它可以防止默认操作（aka，导航）
 $（'＃random-link'）。click（function（event）{
 event.preventDefault（）; 
 $（'＃result'）。text （'我是从随机链接事件中点击'）
}）; 
 
 //这将是委派的侦听器。它不一定是所有a标签
 //你的回应。它可以是任何CSS选择器，导致
 //加载消息，你想要的。 
 $（window）.on（'click'，'a'，function（）{
 alert（'I still bubble up。'）; 
}）; 
  

更新：

也许你不应该触发 $（'。jacket'）。show（）代表links。

  $（ '外套。'）隐藏（）; 
 $ b $（'a：not（.prevent）'）。click（function（）{
 $（'。jacket'）。show（）; 
}）; 
 $ b $（'。prevent'）。click（function（event）{
 event.preventDefault（）; 
 $（'。jacket'）。hide（）; 
}）; 
  

I am designing a mobile website keeping in mind all leading browsers - Safari, Chrome, Dolphin, Opera.

I want to show a "loading" element as and when the page navigates / changes / new page is requested.

I cannot use click event on anchor tags as there are many ones present with preventDefault();.

I tried the following:

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

But it does not work in Dolphin or Opera.

Can someone suggest a cross-browser solution?

--

EDIT: I realize I wasn't very clear in asking my question, apologies. I created a fiddle here- http://jsfiddle.net/hiteshpachpor/7dadA/5/ based on the response. The example makes use of event bubbling.

Now here's the problem I am facing. I would be showing that loader ($('.jacket').show();) each time page changes / navigates. But I don't want it to show up if a link is clicked; I want to do other operations on my page instead. Now, adding the $('.jacket').hide(); line in all such actions would totally suffice but it will not be very ideal for scaling reasons.

This is why I was evaluating the 'beforeunload' method, but no luck there as it is not cross-browser compatible.

Any kind suggestions to tackle this issue?

解决方案

As was mentioned in the comments. However I prefer event delegation instead of attaching events all over the 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.');
});

Update:

Perhaps you should not trigger $('.jacket').show() for "links".

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

$('a:not(.prevent)').click(function() {
    $('.jacket').show();
});

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

这篇关于移动浏览器上的Javascript / jQuery页面更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！