2

这是我的小提琴：http: //jsfiddle.net/olexander/7hB8C/

我有一个锚，其样式为按钮（样式已简化以显示问题）。

HTML：

<a href="javascript:void(0)" class="button demo">Button</a>

CSS：

.button {
    border: none;
    outline: none;    
    text-decoration: none;
    display: inline-block;
}

.button:active {
    transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
}

.demo {
    padding: 40px;
    margin: 20px;
    font-size: 5em;
    color: black;
    background-color: lightgray;
}

问题是链接按钮内有一个不可点击的区域。我可以解释一下，锚内部有一个文本节点，当 mousedown 到文本节点时，经过变换，mouseup 到文本节点之外。这就是为什么不处理鼠标点击的原因。

如果我们选择锚点内的文本节点，它可以像这样可视化（在 mousedown 之前和之后）： 单击文本节点的边框不会触发单击事件

我想注意到，这个问题至少在 Chrome、Opera 和 Safari 中重现，即使我放置了指向 href 标记的链接而不是处理点击事件。它也与 一起复制<button>，而不是 的问题<input type="button">，因为第一个使用内容，第二个使用值。

是否有人对避免或解决此行为的更好方法有想法？提前致谢！

更新：

我找到了一个使用拉伸“存根”<span>覆盖可点击区域的解决方案：

<a href="javascript:void(0)" class="button"><span class="stub"></span>Button</a>

和存根样式：

.button > span.stub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

这个版本在这里发布：http: //jsfiddle.net/olexander/7hB8C/20/

存根可以通过 javascript 动态添加，但思路保持不变。由于内联 span 元素可以嵌套在锚点和按钮中，因此它不会违反 W3C HTML5/XHTML5 规则。

Aequanox 使解决方案变得完美！看看下面的答案。

整个故事发布在这里：动画锚和按钮与 css3

4

2 回答 2

1

似乎:active过渡正在取代点击事件。我认为这是一个浏览器错误。

在这里，我已更改:active为类名.active，并且 apply 在您的事件处理程序中：

$('#linkbutton').click(function(){
    $(this).addClass('active');    
    $(this).delay(200).queue(function() { $(this).removeClass('active');})
    $('#logContainer').append('<span>clicked </span>');    
});

出于某种原因，直到我将 .button 更改为：

display: inline-block;

到：

float: left;

去想......它现在可以工作了。

于 2013-03-03T16:31:54.100 回答
1

您可以通过在 css 中插入它来避免插入标签，从而维护标记清洁器：

.button:before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
 }

文本将无法选择

于 2013-03-13T20:42:47.623 回答