點擊按鈕元素內的複選框 - Firefox問題

我想知道爲什麼下面的JS Fiddle在Chrome中運行良好，但不在Firefox中的原因。儘管在按鈕內部嵌套複選框可能是錯誤的，但我只是有興趣知道在我的JS小提琴上下文中在chrome和firefox之間工作區別背後的理論。點擊按鈕元素內的複選框 - Firefox問題

JS Fiddle

$(function(){  
    $("button.tablesaw-sortable-btn").on("click",function(){   
     alert("button clicked");   
    }); 
    $("input#test").on("click",function(e){   
     e.stopPropagation(); 
    }); 
});

來源

2015-06-27 Rajkishore

看來Firefox和Chrome處理button events調度略有不同。在這種情況下Chrome處理click事件的方式是，它通過所有後代將事件從Window傳播到達到input，這是capture階段，然後一旦它達到input，它就會bubbles直到Window再次通過所有後代。它處理events，具體取決於兩個階段中調用的不同監聽器。在你的情況下，因爲觸發階段的默認值是泡泡階段，所以點擊通過輸入，然後你調用stopPropagation，所以它不會冒泡，並且button上的click不會被觸發。如果您將listener設置爲capture階段，即使您的input上有stopPropagation，也會看到該按鈕被觸發。看到這裏：https://jsfiddle.net/evxz483h/2/

什麼Firefox似乎做的只是當它達到button而不是下降到input泡時。所以click永遠不會在按鈕下面。請注意，這似乎適合與input元素的規格，這不應該是一個按鈕的後代：

交互元素輸入不能顯示爲按鈕元素的後裔。

在這裏看到：http://www.w3.org/TR/html-markup/input.button.html

所以我想這是正常行爲，或至少預期。 Chrome有一個很好的處理方式，使其更加靈活一些，但在其他情況下，Firefox的方式可能會更好。

來源

2015-06-27 21:04:50

這也是爲什麼按鈕內的複選框不會改變光標懸停在Firefox上？另外，似乎Internet Explorer在點擊事件方面具有類似的行爲，但它不會將光標更改爲具有「光標：指針」的任何元素中的「默認」，而不僅僅是按鈕。 – trysis

點擊按鈕元素內的複選框 - Firefox問題

回答

相關問題