您可以使用事件委托:jQuery live() 和 delegate() 方法的 DOM 等效项。
以下方法可能有效:
<head>
<script>
function linkMatcher(node) { // modify this if not all links are disabled
if (node.href) return true;
else return false;
}
document.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
for (var node=target; node!=document; node=node.parentNode) {
if (node.tagName == "A") return !linkMatcher(node);
}
}
</script>
</head>
编辑:这将永久禁用链接。可以通过删除事件处理程序重新启用它们,例如document.onclick = null。
下面的complete, live example 适用于 Linux 的 Chrome、Opera 和 Firefox,以及适用于 Windows 的 IE6 和 IE8。它可以防止点击“等待”类的链接(如果你喜欢,你可以做所有的链接)并记住第一个点击的链接。然后它模拟长时间的加载延迟(五秒),然后在链接上挂接 jQuery 处理程序并删除阻止点击的文档级处理程序,然后在被点击的链接上触发 jQuery 处理程序(请注意,这只触发处理程序,而不是底层的默认行为——但是当你想触发你的 ajax 东西时,我认为这没关系)。 — T.J.克劳德
HTML:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Link Click Delay Test Page</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
p {
margin: 0px;
}
</style>
<script type='text/javascript'>
// A scoping function to avoid creating global symbols
(function() {
// Figure out what to hook clicks on
var container =
document.body ||
document.documentElement ||
document;
// Hook clicks that reach the bottom level
hookClicks();
function hookClicks() {
if (container.attachEvent) {
container.attachEvent("onclick", handleClick);
}
else if (document.addEventListener) {
container.addEventListener("click", handleClick, false);
}
}
// Set up an unhook function for jQuery to call
window.unhookClicks = unhookClicks;
function unhookClicks() {
if (container.attachEvent) {
container.detachEvent("onclick", handleClick);
}
else if (document.addEventListener) {
container.removeEventListener("click", handleClick, false);
}
}
// Handle clicks
function handleClick(event) {
var target;
// Handle Microsoft vs. W3C event passing style
event = event || window.event;
// Get the target (again handling Microsoft vs. W3C style)
target = event.target || event.srcElement;
// Do we have a target that's an A with the class "wait"?
if (target &&
target.tagName.toUpperCase() === "A" &&
(" " + target.className + " ").indexOf(" wait ") >= 0
) {
// It's a link we want to prevent for the moment
// Remember the element that was clicked if there
// isn't already one (or replace it, depends on the
// UX you want to provide
if (!window.pendingLink) {
window.pendingLink = target;
}
// Prevent it from being processed
if (event.preventDefault) { // If W3C method...
event.preventDefault();
}
// This should work if preventDefault doesn't
return false;
}
}
})();
</script>
</head>
<body>
<p><a href='http://www.google.com' class='wait'>Google</a>
- This one waits
<br><a href='http://news.bbc.co.uk' class='wait'>BBC News</a>
- This one also waits
<br><a href='http://www.cnn.com'>CNN</a>
- This one doesn't wait, it goes immediately
</p>
</body>
</html>
JavaScript(无论您的 jQuery ready 处理程序在哪里):
jQuery(function($) {
// Use setTimeout to fake a long delay loading
setTimeout(function() {
// Hook up our proper click handling
// Obviously, replace this with whatever does the ajax
$("a.wait").click(function(event) {
alert("The jQuery handler for " + this.href + " link was triggered.");
});
// If we have clicks disabled, enable them
if (window.unhookClicks) {
window.unhookClicks();
window.unhookClicks = undefined;
}
// Do we have a pending link to follow?
if (window.pendingLink) {
// Yes, grab it and clear it
var $link = $(window.pendingLink);
window.pendingLink = undefined;
// Trigger any jQuery event handlers on it.
// Note that this will NOT follow the link,
// just trigger jQuery event handlers that
// are on the link.
$link.click();
}
// We've loaded!
$("<p>Finally loaded!</p>").appendTo(document.body);
// End of fake delay function
}, 5000);
});