转换锚点上的不可点击区域 [英] Non-clickable area on transforming anchor

问题描述

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

我有一个锚点，它的样式为一个按钮（样式被简化以显示问题）。

I have an anchor, which is styled as a button (the styles are simplified to show the issue).

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出现在文本节点之外。

The issue is that there is a non-clickable area inside the link-button. I can explain it that there is a text node inside the anchor, and when mousedown goes to the text node, after transform, mouseup comes outside the text node. That's why mouseclick is not processed.

如果我们选择锚点内的文本节点，它可以像这样可视化（在mousedown之前和之后）：
< img src =https://i.stack.imgur.com/Klfmx.pngalt =点击文本节点的边框不触发点击事件>

If we select the text node inside the anchor, it can be visualized like this (before and after mousedown):

我想注意，该问题至少会在Chrome，Opera和Safari中复制，即使我将链接指向href标记，而不是处理点击事件。它还用< button> 复制，而不是< input type =button> ，因为第一个使用内容和第二个值。

I would like to notice, that the issue is reproduced at least in Chrome, Opera and Safari, and even if I put a link to href tag instead of handling click event. It is also reproduced with <button>, and not the issue for <input type="button">, because the first one uses content, and the second value.

有没有人有更好的方法来避免或解决这种行为的想法？非常感谢！

Does anyone have ideas about better ways to avoid or workaround this behavior? Thanks in advance!

UPDATE：

stub< span> 以覆盖可点击区域：

I found a solution using a streched "stub" <span> to override the clickable area:

<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规则。

The stub can be added dynamically by javascript, but the idea remains the same. Since the inline span element can be nested inside anchors and buttons, it doesn't break the W3C HTML5/XHTML5 rules.

而Aequanox ！请看下面的答案。

And Aequanox made the solution perfect! Look at the answer below.

整个故事出现在这里： Animated anchor and button with css3

The whole story is published here: Animated anchor and button with css3

推荐答案

您可以避免插入标记，因此保留标记清除程序，方法是将其插入css：

You could avoid inserting the tag, thus mantaining the markup cleaner, by inserting this in the css:

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

文本将无法选择

这篇关于转换锚点上的不可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！