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()函数，该函数为数组编制索引并将结果作为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);
}

Javascript：链接标记＆＃39; a＆＃39; stopPropagation（）在firefox中不起作用

3 个答案: