点击<a>标签内的<div>元素

Question

我有一组放在<a>标签中的

元素，其中还有一个带有自己点击事件的

元素。我希望在该

元素触发点击事件时，<a>标签不应该被触发。

管理该

点击事件的函数试图阻止事件传播，但没有成功。

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

有什么问题吗？

- Apalabrados

---

手头有jQuery吗？只需在事件处理程序中输入return false;即可。 - theHacker

是的，我使用jQuery。在管理div点击事件的函数中尝试了return false;语句，但仍然触发了<a>标签。 - Apalabrados

每当有人问起内联元素中的块级元素时，我就感到不寒而栗。我想我还没有完全适应 HTML5。 - adeneo

@theHacker - 这对于链接内部的元素不起作用。即使取消了事件传播（根据OP），链接仍然会被跟踪。OP可以使用W3C [preventDefault]（http://www.w3.org/TR/DOM-Level-3-Events/#event-flow-default-cancel）方法。 - RobG

@RobG jQuery调用了preventDefault()和stopPropagation()。无论处理程序附加到哪个元素都没有关系。请参见http://code.jquery.com/jquery-1.11.2.js第4668行。 - theHacker

Answer 1

无论您是否使用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 就不会引起导航问题。

- RobG

Answer 2

如果您正在使用jQuery来附加事件，则执行以下操作：

e.preventDefault();

JQuery 规范化了事件对象，因此该方法可在所有浏览器上使用（否则旧版 IE 将无法使用）。

这里是 preventDefault() 的文档。

如果这不起作用，请尝试在 <a> 元素上附加一个 click 处理程序，并从中调用 preventDefault()。

- Vilx-

---

preventDefault 是 W3C 事件模型的一部分，您不需要使用 jQuery 调用它，可以参见 文档对象模型（DOM）Level 3 Events 规范 §3.2。对于 IE，支持在 版本 9 中添加。 - RobG

@RobG - 是的，那就是我说的。 :) - Vilx-

Answer 3

监听多个事件，然后执行在回调函数中确定的操作。

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

- Justin M