单击 <a> 标记内的 div 元素

Question

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

问题是它里面有一个 div 有自己的点击事件，我希望万一 div 元素触发点击事件，标签<a>不应该被触发。

管理 div 单击事件的函数尝试停止传播，但没有成功。

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

怎么了？

Answer 1

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

当链接包含其单击事件不应导致导航的另一个元素时，只需对该事件调用PreventDefault即可。这里没有 jQuery 魔法，它只是使用默认的 DOM 方法：

event.preventDefault();

一个例子：

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);

诀窍是，单击div不会冒泡到链接，但如果没有preventDefault，链接无论如何都会被跟随。

更好的主意是根本不这样做。似乎div不属于 A 元素，因此将其放在外面。然后，单击div引起的导航就不会出现问题。