首页 文章

转换锚点上的不可点击区域

提问于
浏览 次
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会出现在文本节点之外 . 这就是为什么不处理mouseclick的原因 .

如果我们在锚点中选择文本节点，它可以像这样（在mousedown之前和之后）可视化：
click on the border of text node doesn't fire click event

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

有没有人有关于避免或解决这种行为的更好方法的想法？提前致谢！

UPDATE:

我发现使用streched "stub" <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元素可以嵌套在anchor和buttons中，因此它不会破坏W3C HTML5 / XHTML5规则 .

Aequanox使解决方案更加完美！看看下面的答案 .

整个故事发表在这里：Animated anchor and button with css3

html5 css3 transform

2 回答

  • 1

    似乎 :active 转换正在替换click事件 . 我认为这是一个浏览器错误 .

    在这里，我已将 :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;

    去图......虽然它现在有效 .

    回复于
  • 1

    您可以通过在css中插入标签来避免插入标记，从而保留标记清理程序：

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

    但是文本不可选

    回复于

相关问题