假设我们在$(document).ready
回调中将一个.click()
处理程序附加到一个锚(<a>
)标记。此处理程序将取消默认操作(在href
之后)并显示警报。
我想知道的是回调将在什么时候执行,以及用户是否可以单击锚点(文档已经显示在浏览器中),但事件尚未附加。
下面是包含锚点的不同HTML页面,但脚本的包含顺序不同。它们之间有什么区别(如果有的话)?不同的浏览器会有不同的表现吗?
Page1:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Test</a>
</body>
</html>
Page2:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
Page3:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
那么,有没有可能用户通过单击锚点而被重定向到href
,并且永远看不到警报(当然,忽略javascript禁用的情况)?在我提供的任何示例中,都会发生这种情况吗?
我所需要做的就是确保click
事件处理程序已经附加到锚点上,然后用户才有可能单击该锚点。我知道我可以提供一个空的href
,然后在javascript中逐步增强它,但这是一个更一般的问题。
如果web服务器快速生成HTML,但从远程服务器获取jquery库需要时间,会发生什么情况?这会影响我的场景吗?与加载DOM相比,脚本的包含顺序是什么?它们能并行完成吗?
发布于 2010-07-11 02:40:40
在YUI中,有onContentReady()
和onAvailable()
方法。不幸的是,在jQuery中没有类似的东西。然而,有一个插件受到了它们的启发:
http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/
这应该允许您在DOM完全加载之前将事件绑定到锚点。
发布于 2010-07-11 02:13:39
您的第三个示例提供了用户在没有附加覆盖处理程序的情况下单击的最大机会。浏览器通常会先下载并解析每个<script>
,然后再转到下一个。您正在从外部来源(谷歌)引入jQuery --虽然可能是可靠的,但可能不可用或加载速度很慢。在文档<body>
的末尾有两个<script>
块,所以在处理最后两个脚本时,页面的前面区域可能已经下载并呈现到屏幕上了。虽然这种方法是为了向用户呈现响应式的页面加载体验,但他们可以在这个不确定的时间段内单击,当然覆盖处理程序还没有附加。
有一篇关于脚本和加载顺序here的有趣的YUIblog文章。
发布于 2010-07-11 02:06:06
可以肯定的是,可以“欺骗”警报警告(即使启用了Javascript )。尝试在url字段中拖动链接,您将看到它将在没有该警告的情况下执行。如果链接触发了删除操作,这就特别成问题了。
关于document.ready回调-我也有这样的问题。让我解释一下。我们正在做一个项目,所有的表单都显示在弹出窗口(jQuery窗口)中。因此,当弹出窗口关闭时(暂时),页面会重新加载,并且我遇到了重定向到另一个屏幕而不是打开新弹出窗口的情况。
完全同意user384915将javascript直接放在onClick事件上,或者更好地放到href标签上。
https://stackoverflow.com/questions/3220242
复制相似问题