预防的onclick行动与jQuery

有与onclick事件行动预防的onclick行动与jQuery

<a href="#" onclick="alert('panic!')">Let's panic</a> 
<a href="#" onclick="alert('panic!')" disabled="disabled">I can't panic no more</a>

我需要防止链接事件阿克顿斯执行与残疾人属性而没有删除的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>

来源

2009-11-18 Andrew Rumm

所有的jQuery代码应该被包裹在一个'$（文件）。就绪（函数（）{...代码在这里...}）;'也就是说，与来自移除'disabled'标签组合的标记和选择器应该能够正常工作。 – rfunduk 2009-11-18 14:58:32

'返回false;''主场迎战e.preventDefault（）;''VS e.stopPropagation（）;'的讨论在这里找到：http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return -false – 2009-11-18 14:52:17

jQuery是不会解决这一个开箱即用的。它可以提供帮助，但如果只是将它们附加到元素上，则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>

Demo here.

该方法有重写与抢先逻辑直列单击处理（onclick）来捕捉的情况下锚是“无效”和然后取消该事件（与return false）。

的好处还有就是在其上再次启用锚你只需.removeAttr('disabled')。

来源

2009-11-18 15:01:24

干净的解决方案！是事件|| window.event'是必需的，因为jQuery已经规范化了浏览器，而'event'对象是在你的代码调用它时清理过的版本？ – 2009-11-18 15:23:51

@dcneiner：是的，这是必需的。注意，我们只是在浏览器调用的内联事件处理程序（'onclick'）中，*不处理jQuery规范化和调用的处理程序。 – 2009-11-18 15:32:47

太棒了！感谢您解答和解释。正是我需要的。 – 2009-11-18 16:27:54

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 
});

来源

2009-11-18 14:37:46 rfunduk

+1我甚至没有注意到坏的选择 – Matt 2009-11-18 14:38:36

是的，jQuery的_should_能够作出一个'[禁用=“禁用”]'工作，但IMO这是一个坏主意。坚持有效的标记:) – rfunduk 2009-11-18 14:43:24

无论如何，我已经尝试阻止使用一些名为禁用类。它仍然无所作为。 – 2009-11-18 14:58:32

的jQuery添加的任何点击处理程序似乎后那些在标记添加到火。我的解决方案是应用使用jQuery而不是标记的click处理程序，但是您可能没有足够的代码来控制它。如果你这样做，那么就不要应用点击处理程序来锚定标签禁用类（和，是的，我会使用类而不是不适当的属性）。如果您无法控制标记，那么您可能需要使用jQuery替换click处理程序，将其存储起来以备后续重新应用。

$(function() { 
     $('a.disabled').each(function() { 
     var $this = $(this); 
     var click = $this.attr('onclick'); 
     if (click) { 
      $this.data('click',click); 
      // add return false to prevent default action 
      $this[0].onclick = function() { return false; }; 
     } 
     }); 

     $('#restoreClick').click(function() { 
      $('a.disabled').each(function() { 
       var $this = $(this); 
       $this.removeClass('disabled'); 
       var click = $this.data('click'); 
       if (click) { 
        $this[0].onclick = click; 
       } 
      }); 
     }); 
    });

测试了：

<div> 
    <a href="#" onclick="alert('panic!')">Let's panic</a> 
    <a href="#" onclick="alert('panic!')" class="disabled">I can't panic no more</a> 
</div> 
<div> 
    <input type="button" id="restoreClick" value="Restore" /> 
</div>

来源

2009-11-18 14:57:22 tvanfosson

的问题是，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')，并且不需要其他清理/设置。

来源

2009-11-18 15:16:07

我发现了一个很简单的解决方案，以防止今天onclicks，但保持行动，如果你需要它。

<a href="javascript:alert('panic!')" >Let's panic</a> 
<a href="javascript:alert('panic!')" disabled="disabled">I can't panic no more</a> 

$('a').click(function(e){ 
    if($(this).attr('disabled')) e.preventDefault(); 
});

我不是使用“javascript：”的巨大粉丝，但这是迄今为止最简单的问题解决方案。

希望它能帮助！

来源

2012-01-18 21:03:18 MrBojangles

'我不是使用“javascript：”的巨大粉丝，但这是迄今为止最简单的问题解决方案。“您更喜欢其他客户端脚本语言吗？ – user1167442 2013-08-24 15:40:40

我喜欢JavaScript，但我不喜欢使用JavaScript内嵌“javascript：”语法。 “javascript：alert（'panic！'）”< - example。聪明驴评论的第一个要求是它是“聪明的”;） – MrBojangles 2013-09-13 14:25:32

它的确是...... – user1167442 2013-09-14 05:00:18

预防的onclick行动与jQuery

回答

相关问题