Chrome的Button Click行為差異

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

歡迎推文分享:
Published 25 March 2016 07:21 AM 由 Jeffrey
Filed under:
Views: 5,149



意見

# 初階工程師 said on 13 December, 2017 08:27 PM

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

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2016>
SunMonTueWedThuFriSat
282912345
6789101112
13141516171819
20212223242526
272829303112
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication