使用 jQuery 防止 onclick 动作-前端问题

Prevent onclick action with jQuery(使用 jQuery 防止 onclick 动作)

本文介绍了使用 jQuery 防止 onclick 动作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有一些带有 onclick 事件操作的链接

there are some links with onclick event actions

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

我需要防止在具有 disabled 属性的链接上执行事件操作，而不删除 onclick 操作.

I need prevent event actons execution on links with disabled attribute without removing onclick actions.

$('a[disabled]').click(function(e){
  e.stopPropagation();
  return false;
});

这段代码对我没有帮助.

This code doesn't helps me.

更新即使这段代码也不起作用

update Even this code doesn't work

<html><head><script type='text/javascript' src="anF1ZXJ5LTEuMy4yLmpz"></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>

推荐答案

jQuery 不会解决这个 OOTB.它可以提供帮助，但如果您只是附加它们，stopPropagation、stopImmediatePropagation、preventDefault、return false 都不起作用到元素.您需要覆盖元素的点击处理程序.

jQuery is not going to solve this one OOTB. It can help, but none of stopPropagation, stopImmediatePropagation, preventDefault, return false will work if you simply attach them to the element. You need to override the element's click handler.

但是您在问题中声明 不删除 onclick 操作".因此，您需要在事件触发时覆盖默认行为(与简单的 null 为禁用的锚点 onclick 属性相反的更简洁的方法):

However you state in your question "without removing onclick actions". So you need to override the default behavior at the point the event is triggered, (as opposed to the cleaner approach of simply nulling out the onclick attribute for disabled anchors):

这就是我的意思:

<!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="aHR0cDovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjMuMi9qcXVlcnkubWluLmpz"></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) 以捕获锚点禁用"并然后取消事件的情况 (return false).

The approach there is to override the inline click handler (onclick) with preemptive logic to catch the case where the anchor is "disabled" and then cancel the event (with return false).

这样做的好处是，要再次启用锚点，您只需在其上 .removeAttr('disabled') 即可.

The benefit there is that to enable an anchor again you simply .removeAttr('disabled') on it.

这篇关于使用 jQuery 防止 onclick 动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！