如何在jQuery圖像上添加點擊功能

我在畫布上顯示了一個圖像，我正在嘗試向它添加一個點擊功能，以便關閉一個事件。但是，.click()似乎不起作用。有我可以使用的另一個功能嗎？如何在jQuery圖像上添加點擊功能

的jQuery：

function homeScreen() 
{  
    var backImage = new Image(); 
    var playButton = new Image(); 
    backImage.onload = function() 
    {  
     context.drawImage(backImage, 0, 0); 
     context.drawImage(playButton, 400, 600);     
    }; 
    backImage.src="images/homeBackground.jpg"; 
    playButton.src="images/play.png"; 

    $(playButton).click(function() { 
     alert("Hey"); 
    }); 
}

來源

2014-01-11 Andrew

無法將事件偵聽器附加到畫布區域。將它附加到畫布元素，並根據鼠標事件的座標選擇一個動作。或者，將按鈕作爲元素放置在畫布頂部，並向它們添加點擊處理程序。 –

什麼是「jQuery圖像」？ – nnnnnn

@nnnnnn這是一個jQuery圖像：http://brand.jquery.org/resources/jquery-mark-dark.gif –

我不認爲你可以從事件是圖像聽繪製在畫布上。所以我認爲你可以在文檔上或者在畫布上監聽點擊事件，然後檢查點擊是否出現在按鈕佔用的畫布區域。

$('canvas').on('click', function(e) { 
    if (e.pageX >= leftEdgeOfButton && e.pageX <= rightEdgeOfButton 
     && e.pageY >= topEdgeOfButton && e.pageY <= bottomEdgeOfButton) { 
    // handle click event 
    } 
});

爲按鈕的邊緣的位置，我敢肯定，你可以計算出這些值：左側和頂部邊緣可能只是一樣的座標您使用的值來定義該圖像應該繪製，右邊/底部只是左邊或右邊加上按鈕的寬度或高度。

如果畫布與整個畫面尺寸不一樣，則可以將畫布的左側和頂部偏移量添加到e.pageX和e.pageY進行調整。

$('canvas').on('click', function(e) { 
    if (e.pageX + leftOffsetOfCanvas >= leftEdgeOfButton 
     && e.pageX + leftOffsetOfCanvas <= rightEdgeOfButton 
     && e.pageY + leftOffsetOfCanvas >= topEdgeOfButton 
     && e.pageY + leftOffsetOfCanvas <= bottomEdgeOfButton) { 
    // handle click event 
    } 
});

您可以使用jQuery的.offset()函數獲取canvas元素的頂部和左側偏移。

來源

2014-01-12 00:40:01

只要做到：

playButton.onclick = function() { 
    //func stuff 
}

來源

2014-01-11 23:37:17 tymeJV

只能繪製到畫布而不添加到DOM的圖像是可點擊的？雖然我不知道我無法相信它。 –

如果'$（playButton）.click（...'沒有？ – nnnnnn

使用.on() method上動態創建的HTML

$(playButton).on("click",function() { 
     alert("Hey"); 
    });

來源

2014-01-11 23:39:17

'$（...）。click（callback）'和'$（...）。on（'click' ，'callback'）完全一樣 –

@ t.niese var playButton = new Image（）; playButton是動態創建的 –

你使用'.on（）'顯示的代碼完全等同於'.click（） '.click（）'在動態添加的元素上工作_if_'.click（）'被稱爲_after_元素被添加後，但是整個動態/靜態問題在這裏不是問題： OP正在嘗試處理點擊畫布元素上的內容，這與處理img元素上的點擊不一樣。 – nnnnnn

如何在jQuery圖像上添加點擊功能

回答

相關問題