Question

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>

Answer 1

jQuery不会解决这个OOTB。它可以提供帮助，但如果只是将stopPropagation，stopImmediatePropagation，preventDefault，return false附加到元素上，则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都不起作用。您需要覆盖元素的点击处理程序。

但是，您在问题中说明“而不删除onclick操作”。因此，您需要在触发事件时覆盖默认行为（与简单return false禁用锚点的.removeAttr('disabled')属性的更简洁方法相反：

这就是我的意思：

{{1}}

Demo here.

使用抢先逻辑覆盖内联点击处理程序（{{1}}）的方法可以捕获锚点被“禁用”并且然后取消事件的情况（使用{{ 1}}）。

这样做的好处是，只需再次启用锚点，就可以{{1}}。

Answer 2

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

Answer 3

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

Answer 4

jQuery添加的任何点击处理程序似乎都会在标记中添加后点击。我的解决方案是使用jQuery而不是标记来应用单击处理程序，但是您可能没有足够的控制代码来执行此操作。如果你这样做，那么根本不应用click处理程序来锚定禁用类的标签（是的，我会使用类而不是不合适的属性）。如果您无法控制标记，那么您可能希望使用jQuery替换单击处理程序，并将其存储以供以后重新应用。

   $(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>

Answer 5

我找到了一个非常简单的解决方案来防止今天的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：”的忠实粉丝，但这是迄今为止最简单的问题解决方案。

希望它有所帮助！

使用jQuery防止onclick操作

5 个答案: