1

同事報案網頁在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