同事報案網頁在IE與Chrome表現不同，依稀記得遇過，但沒寫成沒找到明確記錄，花了時間回想、研究、實驗，得到結論後才恍然憶起，從HipChat對談翻出以前的辦案記錄。明明是前科犯還重啟調查，記憶力壞掉好可怕，也懊悔浪費了時間。由此得一結論－「勿以茶包小而不記，永遠別信任中年人的記憶力」，故寫此文。
用範例程式說明如下： Live Demo
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width"> <title>Button Click</title> <style> button { padding: 6px; } span { background-color: yellow; } </style> </head> <body> <button> <span>CLICK</span> </button> <scriptsrc="https://code.jquery.com/jquery-2.1.4.js"> </script> <script> $("button").click(function(e) { console.log('Button Clicked'); console.log("e.target=" + e.target.outerHTML);}); $("span").click(function(e) { console.log("Span Clicked");}) </script> </body> </html> |
在<button>裡放了一個<span>，二者都掛上Click事件。在Chrome，點擊文字部分，Span跟Button的Click事件都會被觸發，而在Button Click事件裡e.target指向Span；若點擊文字以外的區域，則只有Button Click被觸發。
IE以及Firefox行為則不同，藏在Button中的Span不接受Click事件，也不會成為e.target，無論點擊哪裡都只觸發Button Click。換句話說，對IE跟Firefox來說，整個Button是一體的，內部的元素不會獨立回應Click事件。
顯然這又是各家瀏覽器對Button Click行為的詮釋差異，但這回不合群的是Chrome同學，在跨瀏覽器之路撒了一顆小石頭…：P