单击“ Dettect”按钮在图像上时

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

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

我认为这可能会有所帮助:)

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

}）;

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

简而言之，当我们单击图像（位于按钮顶部）时，我们将触发按钮的click事件。