Ali*_*Ali 6 javascript ajax jquery onclick javascript-events
如何在加载jQuery之前阻止点击事件上的链接？
原因是我有很少的链接通过jQuery ajax函数调用AJAX,如果用户在加载jQuery框架之前单击它们,浏览器无法触发jQuery ajax函数并将跟随链接href ="..."谢谢.
编辑:我可以用这个吗？
<head>
...
<script type="text/javascript">
window.onload = prevCl();
function prevCl() {
var links = document.links[];
links.onclick = check();
}
function check() {
if (typeof jQuery == 'undefined') {
return false;
}
}
</script>
</head>
四种选择:
选项0
去读Sean Hogan的答案,他指出这可以通过委托(doh!)完成,并且我将一个示例实现放在一起.
选项1
您可以创建href链接"#"直到加载jQuery,然后(如果适用)将其更改为它应该是什么.您可以存储属性中href应包含的内容data-,例如:
<a href='javascript:;' data-href='realtarget.html'>blah</a>
然后:
jQuery(function($) {
$("a[data-href]").each(function() {
var $this = $(this);
$this.attr("href", $this.attr("data-href"));
});
});
再次,只有当你真的需要使href成为href时才是最后一点.如果您通过JavaScript处理点击,则无需.
如果验证是开发周期的重要部分,请务必注意表单data-xyz中的属性在HTML4及之前是无效的(浏览器实际上并不关心,但如果使用验证则再次......).它们从HTML5开始有效.
选项2
onclick在jQuery加载之前使用内联属性拦截点击,基本上说"抱歉,一刻".所以在文件顶部的script标签中:
function sorryLoading() {
alert("Sorry, the page is still loading, one moment please.");
return false;
}
...然后在链接上:
<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>
...然后删除onclickon jQuery加载:
jQuery(function($) {
$("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler);
});
(你可以留下最后一点 - click如果它们都不具有相同的点击处理程序,则可以关闭它.)
我使用上面的一个类来区分这些链接和其他可能有内联的链接onclick(否则,令人惊讶的是选择器"a [onclick]"实际上适用于Chrome,Opera和Firefox for Linux以及Windows上的IE6和IE8).
选项3
因为听起来你希望页面在jQuery加载之前不起作用,所以这是另一种方法:
head页面的部分(不在底部,我通常建议将其放在底部).body标记之前,挂钩您的点击处理程序,而不将它们包裹在一个jQuery.ready调用(或其任何快捷方式)中.原因是:#1将确保在呈现页面之前加载jQuery本身,而#2将尽快连接处理程序.谷歌建议在页面末尾使用一个标签(而不是一个ready函数或类似标签),并说在那时,DOM元素将可以被发现.
当然,另外,您希望通过执行所有页面加载优化,确保链接不能满足用户期望的时间绝对尽可能简短.单击一个链接而不使它看起来像它确实会导致糟糕的用户体验.