標籤點擊檢測

我最近遇到了一個問題，試圖創建一個風格化的鏈接。鏈接的樣式看起來像一個扁平的物理按鈕。當用戶點擊鏈接時，我們希望它的行爲有點像按鈕，所以'按鈕'向下移動4個像素。標籤點擊檢測

我這樣做是通過在底部有邊框的標籤內有一個div。當a標籤爲：active時，div底部的邊框會縮小4個像素，並且在標籤的頂部添加一個填充以將'button'div向下移動。

問題：

如果用戶點擊在4個像素的DIV位移的最頂端會導致鏈接不火即使用戶仍在點擊標籤。

我已經嘗試了各種迭代：通過位置相對，標籤上的邊框「動畫」div，甚至隱藏/顯示間隔div（仍在標籤內）。沒有任何作品（嘗試在不同的瀏覽器只是爲了看看是否是它，沒有幫助）。我想知道這是爲什麼。

這裏有一個JSBin的鏈接提供了問題的一個例子：http://jsbin.com/eminuk/4/edit

在這個例子中我做了一個標記紅色的背景顏色，所以它很清楚。打開控制檯（點擊時每個元素都向控制檯外出）。點擊灰色按鈕的最上方。

來源

2013-06-27 Autofill

我花了一段時間，但我找到了解決方案！只要改變

.btn-link:active { padding-top: 4px; }

到

.btn-link:active { padding-top: 4px; margin-top:-4px; }

它改變了動畫的一點點（它種移動背景了，而不是前面的下降），但它是幾乎相同的，完全可點擊

來源

2013-06-27 21:17:10

有趣。我想出了一個解決方案（儘管它有點複雜），在覆蓋按鈕的標籤中添加絕對定位的div。我仍然很想知道爲什麼點擊事件不會在我的第一個示例中觸發。 – Autofill

這是因爲您在鏈接被觸發前在鏈接頂部添加了填充（在鏈接在mouseup上被觸發時在鏈接上）。在添加填充的空間中，元素不再存在，並且出於顯而易見的原因，您不能超級鏈接填充 –

如何做這樣的事情，而不是...

<a href="#" class="my-btn"> 
    <img src="my-btn-image.png" alt=""> 
</a>

和css ...

.my-btn { 
    display: block; 
    width: 150px; 
    height: 25px; 
} 

.my-btn img { 
    display: block; 
    position: relative; 
} 

.my-btn:active img { 
    top: 4px; 
}

在我的腦海裏，雖然，創建一個「動畫」更好的方法請點擊按鈕是使用一個小按鈕精靈。在下面的情況下，您將創建一個75像素高的圖像，每種狀態（向上，向上/向下，向下/單擊）佔據圖像的25像素卡盤。

<a href="#" class="my-btn">My Button</a>

和css ...

.my-btn { 
    display: block; 
    width: 150px; 
    height: 25px; 
    background-image: url(my-btn-image.png); 
    background-position: top; 
    text-indent: -9999px; 
} 

.my-btn:hover { 
    background-position: center center; 
} 

.my-btn:active { 
    background-position: bottom; 
}

注：背景位置可以在像素值（0，0 -25px 0，-50px 0）如果你願意來設置。

來源

2013-06-27 20:35:10 relic

標籤點擊檢測

回答

相關問題