0

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

当图像超过它时我可以单击按钮的任何帮助 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" />
4

4 回答 4

1

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

  • 在图像上使用z-index（也许opacity也使用）和上升按钮
  • pointer-events: none为图像设置
  • 附加onclick到图像，暂时隐藏它（ ），并用方法visibility: hidden检测点击的元素elementFromPoint()
于 2013-06-07T06:05:42.590 回答
0

像这样将图像作为背景

     <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>
于 2013-06-07T05:25:04.617 回答
0

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

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

见http://jsfiddle.net/EV9Pq/1/

于 2013-06-07T05:30:38.283 回答
0

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

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

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

});

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

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

于 2013-06-07T06:25:50.370 回答