Javascript：鏈接標記'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()函數對數組進行索引並以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 。 更好的是，您可以使用addEventListener調用替換討厭的.onclick ，然后可以使用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);
}