Dar*_*rov 73 javascript jquery
假设我们将.click()处理程序附加到回调中的anchor(<a>)标记$(document).ready.此处理程序将取消默认操作(跟随href)并显示警报.
我想知道的是,什么时候回调将会执行,并且用户可以点击锚点(文档已经在浏览器中显示),但事件尚未附加.
以下是包含锚点的不同HTML页面,但脚本的包含顺序不同.它们之间有什么区别(如果有的话)？不同的浏览器会表现不同吗？
第1页:
<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>
第2页:
<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>
第3页:
<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相比,脚本的包含顺序是什么？它们可以并行完成吗？
Dou*_*ner 60
示例3 将具有用户能够在没有处理程序附加自身的情况下单击链接的最高机会.由于您在呈现链接后加载jQuery库,如果Google的服务器有点慢(或者DNS查找需要一秒左右),或者用户计算机处理jQuery的速度很慢,则该链接将没有其单击处理程序当用户尝试单击它时附加.
另一种可能发生这种情况的情况是,如果您有一个非常大或很慢的加载页面,并且此链接位于顶部.然后,当DOM的一部分可见时,DOM可能还没有完全就绪.如果您遇到这样的问题,最安全的做法是:
head(例1或2)中加载jQuery<a>元素之后立即附加click事件,但不在DOMReady回调中.这样它将立即被调用,不会等待文档的其余部分.渲染元素后,可以从DOM中获取它,然后jQuery可以访问它:
<a href="http://www.google.com">Test</a>
<script type="text/javascript>
// No (document).ready is needed. The element is availible
$('a').click(function() {
alert('overriding the default action');
return false;
});
</script>
另外,基于user384915的注释,如果操作完全依赖于JavaScript,那么甚至不将其作为HTML的一部分呈现,在jQuery准备好之后添加它:
<script type="text/javascript">
jQuery(function($){
$("<a />", {
style: "cursor: pointer",
click: function() {
alert('overriding the default action');
return false;
},
text: "Test"
}).prependTo("body");
});
</script>
Mat*_*off 15
你在这里有几个不同的问题
什么时候执行$(document).ready回调？
它在DOM完全加载后立即执行.不是当所有的东西(如图像)都完成下载时,就像.load()一样.在此之前(通常),基本上就是它自己构建的页面.
我想知道的是回调何时执行
单击时.
用户是否可以单击锚点(文档已在浏览器中显示)但事件尚未附加.
对的,这是可能的.但是把它放在.ready()中会给你最好的机会.只有两种方法可以"更加确定"它不会.这些实际上是在自己的链接上使用'onclick',并将javascript直接放在链接之后(而不是在.ready()中),以便在创建链接后立即执行.
此外,您提供的2个代码示例的工作方式也没有区别.但是,在第二个中,您不需要将代码放在.ready()中,因为它存在于链接之后,它将始终在创建链接后执行.如果你从.ready()中删除它,那将是我在上面描述的两种方式中的第一种.
另外,不要把'return false;' 在你的回调中,最好使用.preventDefault()和.stopPropagation(),这将允许你指定是要阻止默认操作还是阻止事件冒泡,或两者兼而有之.
| 归档时间： |
|
| 查看次数： |
7962 次 |
| 最近记录： |