Link 标签 'a' stopPropagation() 在 Firefox 中不起作用

Question

使用这个：

function showFoo(e) {
    $(e.path[0].hash.replace('#', '.'))[0].scrollIntoView()
    e.cancelBubble = true;
    e.stopPropagation();
    e.preventDefault();
    e.returnValue = false;
    e.cancel = true;
    return false;
  }
  var links = this.getElementsByTagName('a')
  console.log(links)
  for (var i = 0; i < links.length; i++) {
    links[i].onclick = showFoo
  }

在 Firefox 上不工作，但在 Chrome 上工作正常。

Answer 1

试试这个

function showFoo(e) {
  e.stopPropagation();
  e.preventDefault();
  console.log('event', e);
  //$(e.path[0].hash.replace('#', '.'))[0].scrollIntoView()
}

var links = document.getElementsByTagName('a')
console.log(links)

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', showFoo )
}

<a href="#test"> See console output </a>

Answer 2

您的控制台有任何错误吗？我怀疑您在以下行中遇到错误，这会中断 JS 执行，从而导致 stopPropigation 无法执行。错误可能在这一行：

$(e.path[0].hash.replace('#', '.'))[0].scrollIntoView()

当您使用 [0] 索引数组时，您将获得原生 JS 对象 - 而不是 jQuery 对象。因此，当您尝试调用 jQuery 函数 .scrollIntoView() 时，您应该会收到错误消息。您可以将该索引表达式包装在 jQuery 对象中，或者使用 .eq() 函数，该函数索引一个数组并将 returns 结果作为 jQuery 对象。

$($(e.path[0].hash.replace('#', '.'))[0]).scrollIntoView()
//or
$(e.path[0].hash.replace('#', '.')).eq(0).scrollIntoView()

就个人而言，我更喜欢第二种方法，因为它看起来更干净。

Answer 3

我无法在任何规范中将 path 定位为有效的 MouseEvent 属性，因此我不确定它是否是标准的属性，但无论是如果 Firefox 不支持它，您可能会在控制台中收到错误消息。

但是，您可以将 e.path[0] 替换为标准的 e.currentTarget。更好的是，您可以将讨厌的 .onclick 替换为 addEventListener 调用，然后您可以只使用 stopPropagation 和 preventDefault.

function showFoo(e) {
    $(e.currentTarget.hash.replace('#', '.'))[0].scrollIntoView()
    //e.cancelBubble = true;
    e.stopPropagation();
    e.preventDefault();
    //e.returnValue = false;
    //e.cancel = true;
    //return false;
}
var links = this.getElementsByTagName('a')
console.log(links)
for (var i = 0; i < links.length; i++) {
    //links[i].onclick = showFoo
    links[i].addEventListener('click', showFoo);
}

Link 标签 'a' stopPropagation() 在 Firefox 中不起作用

Link tag 'a' stopPropagation() doesn't work in Firefox

javascript

dom-events