标签点击检测

我最近遇到了一个问题，试图创建一个风格化的链接。链接的样式看起来像一个扁平的物理按钮。当用户点击链接时，我们希望它的行为有点像按钮，所以'按钮'向下移动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

标签点击检测

回答

相关问题