Question

如何在javascript中编写隐形可点击按钮？
这一行：

style = "visibility: hidden"

使其不可见且无法点击。

Answer 1

visibility: hidden完全隐藏了该元素，这就是为什么点击它不起作用...尝试使用此尺寸。

<a href="#"><img src="http://placehold.it/150x150"></a>

img{
    opacity: 0;
}

http://jsfiddle.net/brbcoding/VBkRF/

Answer 2

试试这个Link

<input type="button" style="color: transparent; background-color: transparent; border: solid;" onclick="alert('test');">

Answer 3

我认为这是误入歧途的目标，并且有更好的方法可以实现所需的任务 - 但是，真正的任务只是在隐藏的评论中隐约暗示。

无论如何，请参阅此jsfiddle显示颜色匹配，透明颜色和不透明度：0仍将按钮元素保留为可点击。（在Chrome，Safari，IE8-10 / Standards，FF中验证。）

HTML：

<h3>colormatch</h3>
<div class=box>
<button id=b1 onclick=alert(1)>here</button>
</div>

<h3>invisible</h3>
<div class=box>
<button id=b2 onclick=alert(2)>here</button>
</div>

<h3>opacity 0</h3>
<div class=box>
<button id=b3 onclick=alert(3)>here</button>
</div>

<h3>transparent</h3>
<div class=box>
<button id=b4 onclick=alert(4)>here</button>
</div>

CSS：

#b1 {
    border:none;
    background-color:white;
    color:white;
}
#b2 {
    visibility:hidden;
}
#b3 {
    opacity:0;
}
#b4 {
    border:none;
    background-color:transparent;
    color:transparent;
}
.box {
    border:1px solid red;
    display:inline-block;
}

javascript中的隐形可点击按钮

3 个答案: