禁用动态加载HTML中的href

Question

我正在使用以下代码来禁用预览页面上的所有链接:

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

这会禁用所有静态加载的链接。然而，所有使用ajax加载的标签仍然可按。

我该如何做到即使是动态加载的链接也被禁用在我的预览中？

- WhoobWhoob

Answer 1

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

该元素不会成为鼠标事件的目标；

你可以直接对标签进行样式设置：

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>

- Ori Drori

---

我之前见过这个解决方案。但是它不会禁用#container子元素中的<a>标签，对吗？ - WhoobWhoob

它确实可以 - 这就是CSS子选择器的工作方式 - 请参考Yahoo的示例。 - Ori Drori

很奇怪，我的<a>标签在一个子元素x5内却没有得到pointer-events: none的属性。不过因为这是一个很好的回答，所以我会接受它。 - WhoobWhoob

它是否在iframe中？ - Ori Drori

当然。 <iframe id="theme-preview-frame" src="/preview/3"></iframe> - WhoobWhoob

Answer 2

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

自jQuery 3.0起，.bind()已被弃用。自jQuery 1.7以来，它已被.on()方法取代，用于将事件处理程序附加到文档，因此其使用已被不鼓励。

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

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

然而，@OriDrori发布的CSS解决方案似乎是您情况下最好的答案。

希望这能帮到您。

- Zakaria Acharki

Answer 3

你需要使用事件委托。将代码更改为使用.on()事件绑定方法：

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

- Scott Marcus