同事報案網頁在IE與Chrome表現不同,依稀記得遇過,但沒寫成沒找到明確記錄,花了時間回想、研究、實驗,得到結論後才恍然憶起,從HipChat對談翻出以前的辦案記錄。明明是前科犯還重啟調查,記憶力壞掉好可怕,也懊悔浪費了時間。由此得一結論-「勿以茶包小而不記,永遠別信任中年人的記憶力」,故寫此文。

用範例程式說明如下: Live Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="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>
<script src="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


Comments

# by 初階工程師

原來不是程式碼寫錯,是chrome的問題啊...,這種時候如果要達到類似的效果,外面的button只好改用<a>來處理了,用button包覆元素的作法好像很少見

Post a comment