Question

我正在使用这段代码禁用预览页面的所有链接：

var disableLink = function(){ return false;};
$('a').bind('click', disableLink);

这将禁用静态加载的所有链接。但是，使用ajax加载的所有标签仍然可以按下。

如何在预览中禁用所有链接以及动态加载的链接。

Answer 1

使用CSS - pointer-events: none。根据MDN：

该元素永远不是鼠标事件的目标;

您可以直接设置a代码的样式：

a {
    pointer-events: none;
}

但是，如果您不想禁用页面上的所有a标记，则应将其限制为容器内的锚元素：

#container a {
    pointer-events: none;
}

<强>演示

setTimeout(function() {
  $('#container').append('<a href="http://www.facebook.com">Facebook</a>');
  
    $('#child').append('<a href="http://www.yahoo.com">Yahoo</a>');
}, 1000);

#child {
  border: 1px solid black;
}

#container a {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <a href="http://www.google.com">Google</a>
  
  <div id="child"></div>
</div>

Answer 2

请不要使用已弃用的 bind() 。

自jQuery 3.0起， .bind（）已被弃用。它已经被 .on（）方法取代，因为jQuery 1.7，因此已经不鼓励使用事件处理程序。。

在处理动态添加到DOM的新元素时，您应该使用事件委派 on() ：

$('body').on('click','a', disableLink);

然而，@ OriDrori发布的css解决方案看起来是您案例的最佳答案。

希望这有帮助。

Answer 3

您需要使用事件委派。更改代码以使用 .on() 事件绑定方法：

  $('body').on('click', 'a', function(){ return false;};);

在动态加载html时禁用href

3 个答案: