單擊“ 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事件。