按鈕事件和點擊深度

我有點擊深度的按鈕（即它們向下移動幾個像素：激活狀態），但它們導致問題，有時按鈕被點擊並且什麼也沒有發生。按鈕事件和點擊深度

<button>Button</button> 

button:active { 
    margin-top: 5px; 
}

我已示出的問題在的jsfiddle：

http://jsfiddle.net/helenst/vUU55/

在鍍鉻，有一個薄帶上面和下面的文字，高度等於點擊深度，其中點擊事件不要開火。（例如，嘗試點擊'B'上方的一個或兩個像素）接收到mousedown和mouseup，但點擊不會觸發。

在Firefox和Opera中，在鼠標點擊不響應的按鈕頂部有一個大小相同的區域。我覺得這更合乎邏輯，因爲mousedown位於按鈕內部，但mouseup位於其外部。如果我在此區域點擊，但在釋放它之前將鼠標拖回到按鈕中，點擊將被激活。但是，它仍然不完全合理 - 如果我在按鈕周圍包裝容器（以便其中包含所有按鈕狀態），並檢測容器上的事件，問題仍然會發生。

如果我刪除點擊深度，一切都很好。

我想我可以讓它響應mousedown事件，然後檢測文檔上的mouseup，這可能會繞過它 - 但它違反了正常的按鈕行爲，我想要一個非javascript的解決方案。任何人都可以幫忙嗎？

來源

2012-11-22 helenst

在我看來，爲了觸發'click'事件，事件目標必須在'mousedown'和'mouseup'處相同。即使將處理程序綁定到容器，情況也並非如此。 –

所以你說即使我在div上處理事件，按鈕也是事件目標？有什麼方法可以改變它嗎？ – helenst

如果你可以使用padding-top（或邊界內的任何東西 - 甚至將border-top設置爲5px可以工作，對不起，未經測試）進行：活動樣式工作。雖然這當然會破壞你的造型，一個背景頂部對齊的水平條形圖像可以取代頂部邊框，如果你需要它在那裏，雖然是一個黑客的想法）。

道歉，目前無法在較新的瀏覽器中測試。我已經看到過這種類型的按鈕，但不記得任何非正式的用於測試他們如何處理這個問題/他們使用什麼代碼。

幾乎使這個新的答案，但SO不太喜歡：另一種替代品，雖然很難增加真正的深度（運動），但是在邊框樣式中使用插入和開始。

來源

2012-11-22 14:56:17 Breezer

根據您的評論，我試圖通過設置一個白色的上邊框和相應地調整高度來做活動狀態，但它做了同樣的事情。與位置相同：相對; top：5px; – helenst

但你是對的，必須有其他網站的按鈕，這樣做的事情。只需要考慮正確的谷歌查詢:-) – helenst

按鈕事件和點擊深度

回答

相關問題