如何使用jQuery禁用所有链接的默认点击行为

How to disable ALL links' default click behaviour using jQuery?

本文关键字：默认 链接 jQuery 何使用      更新时间：2023-09-26

编辑：最初的错误是一个错字。我将重写它，以便它对社区有用。

如何在不向每个元素添加处理程序的情况下禁用具有某个类（例如".disabled"）的所有链接？

这种方法的优点是，它可以与此类的每个链接（或元素）一起使用，无论它们是动态添加的还是在网页的生命周期中更改其类的。

如果解决方案阻止"click"事件冒泡，这是可以接受的（对于此用例）。

删除 href 属性是不可接受的（对于此用例），以后可能会"未禁用"。

演示调试并列出所有委托事件。

您可以在容器上使用jQuery的.on()方法，并且不会拥有数百个点击事件。

.HTML：- 

<div id="container">  // #container has the event handler assigned
  <a>content</a>
  <a href="http://asdasd.com" class="disabled">Disabled</a>
  <a href="http://asdasd.com">Not disabled</a>
  <a>content</a>
</div>

jQuery

// Whenever <a> elements that descend from #container get   
// clicked the click event handler will fire.
$('#container').on( 'click','.disabled', function(e) {
    e.preventDefault();
    e.stopPropagation();
  return false;
});
您必须为每个

元素附加一个事件（这将完成）：

$(".disabled").click(function(e){
    e.stopPropagation();
    e.preventDefault();
});

将以下类应用于所有元素：

.not-active{
  pointer-events: none;
  cursor: not-allowed;
}
$('a').addClass('not-active');


<div class="body">
  <a href="javascript:alert('Click');">Enabled</a>
  <a href="javascript:alert('Click');" class="disabled">Disabled</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(".body").on('click','a',function(e){
    if ($(this).is('.disabled')) {
      e.preventDefault();
      e.stopPropagation();
      alert("Click disabled");
    }
  });
 </script>

这对我有用。

您可以通过此代码禁用链接网址上的重定向

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<a href="http://google.com">google</a>
<br />
<a href="http://facebook.com">Facebook</a>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    jQuery('body').click(function () {return false;});
</script>
</html>

<div id="container">  // #container has the event handler assigned
  <a>content</a>
  <a href="http://www.google.com" class="disabled">Disabled</a>
  <a href="http://www.google.com">Not disabled</a>
  <a>content</a>
</div>
$(document).ready(function(){
$('#container').on( 'click','.disabled', function(e) {
    e.preventDefault();
    e.stopPropagation();
  return false;
});
});

只需将 href 链接替换为 void 引用：

$('.disabled').each(function(i) {
    if ($(this).attr('href')) $(this).attr('href', 'javascript:void(0);');
});

作为后续措施，如果您仍然需要实际链接，您可以将它们保存到对象的数据中，然后更改它们！

$('.disabled').each(function(i) {
    var href = $(this).attr('href');
    if (href) {
        $(this).data('href', href)
            .attr('href', 'javascript:void(0);');
    }
});

例

$('.disabled').each(function(i) {
	var href = $(this).attr('href');
	if (href) {
		$(this).data('href', href)
			.attr('href', 'javascript:void(0);');
	}
});
setTimeout(function() {
	$('.disabled').each(function(i) {
		var href = $(this).attr('href');
		if (href) {
			var href = $(this).data('href');
			console.log(href)
			$(this).after($('<i />', { html: ' &nbsp; - My old Link was: <b>' + href + '<b />' }).fadeIn());
		}
	});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="bob.com" class="disabled">bob</a><br />
<p class="disabled">ron</p><br />
<a href="jane.com" class="disabled">jane</a><br />
<h3 class="disabled">sally</h3><br />
<a href="trump.com" class="disabled">trump</a><br />

相关文章：