Question

当我点击按钮图像时，我有一个按钮和一个图像。但是当我再次点击这个按钮时，点击没有执行，因为图像克服了它。我正在尝试当图像越过按钮后，此按钮单击应该无法禁用。但我无法做到。我有这个链接，其中我使用了一个按钮和一个图像现在图像的某些部分在按钮上，一半的按钮没有覆盖图像。当点击被图像按钮覆盖的按钮的一部分没被点击的时候，但是当点击被图像按钮覆盖的残留部分给我点击效果的时候。

任何帮助，我可以在图像结束时单击按钮 JS FIDDLE

<button class="stage"
                    style="width: 43px; height: 50px; margin-left: 65px;"
                    onclick="myFunction('a','1');" id="a"></button>

<img id="player" src="http://s18.postimg.org/wfl7311th/i5_Es6_2.png"
                    style="margin-left: -45px;margin-top:10px" />

Answer 1

实现这一目标有几种可能性。

使用z-index（可能还有opacity）并在图片上方按下按钮
为图片设置pointer-events: none
将onclick附加到图片，暂时隐藏（visibility: hidden），然后使用elementFromPoint()方法检测点击的元素

Answer 2

将图像作为背景提供

     <button class="stage"
                style="width: 43px; height: 50px; margin-left: 65px; background-image:url(http://s18.postimg.org/wfl7311th/i5_Es6_2.png)"
                onclick="myFunction('a','1');" id="a"></button>

Answer 3

您可以向图像添加onClick处理程序以“转移”点击：

onclick="document.getElementById('a').click();"

请参阅http://jsfiddle.net/EV9Pq/1/

Answer 4

如果我理解正确，您的图像位于按钮顶部，当图像位于顶部时，按钮上注册的点击事件不会触发。

我认为这可能会有所帮助：）

$('.imagelink').click(function(){
$('.targetButton').trigger('click');

}）;

小提琴 - http://jsfiddle.net/luciferous/jLV2x/1/

简而言之，当我们点击图片（位于按钮顶部）时，我们会触发按钮的点击事件。

检测按钮单击当图像打开时

4 个答案: