如何在html中調用元素的onClick事件並等待單擊發生。來自javascript中的另一個函數

Question

我正在嘗試開發一個玩紙牌的網站。 在游戲循環中，我需要等待用戶單擊圖像（這是html中的元素），然后決定下一步該怎么做。 我正在使用javascript（我對jquery或ajax不了解）。如何確保javascript函數一直等到用戶單擊圖像。 在此先感謝您，提供代碼示例將非常有幫助。

Answer 1

Javascript是異步工作的，這意味着您無法通過while循環阻止JS進程，因為不會觸發諸如鼠標單擊之類的事件。

觀看此演示文稿 ，您應該會明白很多事情。

對於紙牌游戲，您實際上並不需要自己的游戲循環，只需添加事件偵聽器以單擊圖片節點即可，如下所示：

var img = document.getElementById('imageID');
img.addEventListener('click', function(event) {
    // do something, i.e. select clicked card
});

事件監聽器是您玩JavaScript游戲所需的一切。 即使您想創建實時游戲，您所要做的就是在setTimeout中注冊物理邏輯，並在requestAnimationFrame中進行渲染。

Answer 2

//implement image click handler

<img src="image1" onclick="jsfunction()" />

<script language="javascript">
    //declare variable to store image is clicked or not
    var imageclicked = false;

    function jsfunction(){
        imageclicked = true;
    }


    function jsWait(){
        if(imageclicked) {

            //include your code here.
            //
            //
            //

            //reset imageclicked variable to false
            imageclicked = false; 
        }

        return false;

    }


    setInterval('jsWait()', 1000);

</script>