And*_*umm 30 javascript jquery events onclick
onclick事件操作有一些链接
<a href="#" onclick="alert('panic!')">Let's panic</a>
<a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a>
我需要在具有禁用属性的链接上执行阻止事件actons执行而不删除onclick操作.
$('a[disabled]').click(function(e){
e.stopPropagation();
return false;
});
这段代码对我没有帮助.
更新即使这段代码也行不通
<html><head><script type='text/javascript' src='jquery-1.3.2.js'></script></head>
<body>
<a href='#' onclick="alert('HA-ha!')" disabled="disabled" class="disabled">TEST</a>
<script type="text/javascript">
$('a[disabled], a.disabled').click(function(e){
console.log('override?');
e.stopImmediatePropagation();
e.preventDefault();
e.stopPropagation();
return false;
});
</script>
</body></html>
Cre*_*esh 55
jQuery不会解决这个OOTB.它可以帮助,但没有的stopPropagation,stopImmediatePropagation,preventDefault,return false将工作,如果你简单地将它们连接到的元素.您需要覆盖元素的单击处理程序.
但是,您在问题中说"不删除onclick操作".因此,您需要在触发事件时覆盖默认行为(与简单地null删除onclick禁用锚点属性的更简洁方法相反):
这就是我的意思:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Disable clicks</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="#" onclick="alert('panic!')">Let's panic</a>
<a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a>
<script>
$('a[onclick]').each(function(){
$(this).data('onclick', this.onclick);
this.onclick = function(event) {
if($(this).attr('disabled')) { // HERE
return false;
};
$(this).data('onclick').call(this, event || window.event);
};
});
</script>
</body>
</html>
接下来的方法是onclick使用抢占逻辑覆盖内联单击处理程序()以捕获锚被"禁用" 然后取消事件(with return false)的情况.
这样做的好处是可以再次启用锚点.removeAttr('disabled').
disabled不是锚的财产.使用类似的东西rel='disabled'.
$('a[rel="disabled"]').click( function() { return false; } );
更新:
啊,当然.它仍然会触发,alert因为它实际上是标记中的内联!我从来没有这样做过,所以没有注意到.将该单击处理程序从标记中取出并首先在jQuery中执行,这样您就可以执行以下操作:
$('a').click( function() {
if( $(this).attr('rel') == 'disabled' ) { return; }
// do stuff here when not disabled
return false; // so your '#' href doesn't get used
} );
问题是jQuery按顺序添加事件.要停止其他事件,您需要停止的事件必须在停止代码之后.由于您在点击时有代码,因此您需要更改订单.这就是我要做的:
<a href='#' onclick="alert('HA-ha!')" class="disabled">TEST</a>
<a href='#' onclick="alert('HA-ha!')">TEST</a>
<script type="text/javascript">
$('a').each(function(){
// Cache event
var existing_event = this.onclick;
// Remove the event from the link
this.onclick = null;
// Add a check in for the class disabled
$(this).click(function(e){
if($(this).hasClass('disabled')){
e.stopImmediatePropagation();
e.preventDefault();
}
});
// Reattach your original onclick, but now in the correct order
// if it was set in the first place
if(existing_event) $(this).click(existing_event);
});
</script>
好处是只使用jQuery删除/添加禁用的类:$('a#whatever').addClass('disabled')或删除它$('a#whatever').removeClass('disabled'),不需要其他清理/设置.