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

2019年8月4日 147次阅读

我正在设计一个移动网站,牢记所有领先的浏览器 – Safari,Chrome,Dolphin,Opera.

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

我不能在锚标签上使用click事件,因为存在许多与preventDefault();一起出现的事件.

我尝试了以下方法：

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

但它在Dolphin或Opera中不起作用.

有人可以建议跨浏览器解决方案吗？

–

编辑：我知道我不是很清楚地问我的问题,道歉.我在这里创建了一个小提琴 – 基于响应的http://jsfiddle.net/hiteshpachpor/7dadA/5/.该示例使用事件冒泡.

现在这是我面临的问题.每次页面更改/导航时,我都会显示加载程序($(‘.jacket’).show();).但我不希望它显示是否点击了链接;我想在我的页面上做其他操作.现在,添加$(‘.jacket’).hide();在所有这些行动中的行完全就足够了,但对于缩放原因来说它不是很理想.

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

有什么建议可以解决这个问题吗？

最佳答案 正如评论中提到的那样.但是我更喜欢事件委托而不是在整个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().

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

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

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