Question

我在<a>标签内有一组div元素，带有href。

问题是它内部有一个div，它有自己的click事件，我希望在div元素触发click事件的情况下，不应该触发<a>标记。

管理div click事件的功能试图阻止传播但没有成功。

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

怎么了？

Answer 1

如果您使用jQuery附加到事件，请执行

e.preventDefault();

JQuery规范化事件对象，因此所有浏览器都可以使用此方法（否则旧版IE没有）。

以下是preventDefault()的文档。

如果这样做无效，请尝试在click上附加<a>处理程序并从中调用preventDefault()。

Answer 2

无论您是否使用jQuery（或大多数其他库），答案都是一样的。

当链接包含其点击事件不应导致导航的其他元素时，只需在事件上调用preventDefault即可。这里没有jQuery魔法，只是使用默认的DOM方法：

event.preventDefault();

一个例子：

function foo(event) {

  console.log(event.target.textContent);

  if (event.stopPropagation) {
    // Stop propagation
    event.stopPropagation();
    // Stop default action
    event.preventDefault();
  }

  // IE model
  event.cancelBubble = true;
  event.returnValue = false;
  return false;
}

// Attach the listeners
document.getElementById('d0').addEventListener('click', foo, false);
document.getElementById('d1').addEventListener('click', foo, false);

Click on the Div, no click reaches the A element
<a href="#" onclick="console.log('Click reached ' + this.textContent)">Link
  <div id="d0">Div</div>
</a>Click on the Div, the link isn't followed
<a href="http://www.apple.com">Apple
  <div id="d1">Div</div>
</a>

诀窍是，div上的点击不会冒泡到链接，但如果没有 preventDefault ，则无论如何都会关注链接。

更好的想法就是不要这样做。 div似乎不属于A元素，因此将其放在外面。点击导致导航的div没有任何问题。

Answer 3

收听多个内容，然后执行在回调中确定的操作。

$('.obj1, .obj2, .obj3').on('click', function (event) {
  var target = $(event.target);
  if (target.hasClass('.obj1')) {
    # do stuff
  }
// ...

点击<a> tag</a>内的div元素

3 个答案: