Question

嗨，这是一个奇怪的问题，我会试着正确地问它。我有一个使用javascript的函数叫做load canvas。

function loadCanvas(canvas) {

relevant code here...

}

我还有一个名为btn的普通按钮。

<button class="btn" type="button">Play!</button>

我想知道我可以在选择播放按钮之前禁用该功能吗？该功能适用于使用javascript的游戏。所以在加载时没有任何东西，直到我按下播放然后它出现了！

任何想法/帮助吗？

Answer 1

$(document).ready(function(){

    var loadCanvas=  function (canvas) {

             relevant code here...

         } 

    $("#test").on('click',loadCanvas()); // using jquery

document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript

<button class="btn" id="test" type="button">Play!</button>

})

Answer 2

如果您遇到问题，因为其他方法正在触发该功能，您可以添加一个带布尔值的标志，并在您点击时将其打开。

类似的东西：

该按钮根本不会改变

<button class="btn" type="button">Play!</button>

带有此更改的js代码：

var buttonClicked = false;
function loadCanvas(canvas) {
    if(buttonClicked){
        relevant code here...
    }
}

在点击功能中，在调用函数之前添加它：

buttonClicked = true;

最后你的js应该是这样的：

var buttonClicked = false;
function loadCanvas(canvas) {
    if(buttonClicked){
        relevant code here...
    }
} 

$(".btn").click(function(){
    buttonClicked  = true;
    var canvas = ...;
    loadCanvas(canvas );
});

修改

如果您有更多类.btn的按钮，您应该使用id并使用id的选择器而不是类选择器更改.click()的选择器

Answer 3

正如您在评论<script type="text/javascript"> loadCanvas("game"); </script>中提到的那样，您在页面加载后立即调用该函数。因此，您必须将其更改为：

<button class="btn play-button" type="button">Play!</button>

    <script type="text/javascript">
         $('.play-button').click(function(e){
        loadCanvas("game");}
        );
    </script>

如果您不使用jquery，则必须通过javascript处理click事件。

Answer 4

你必须做以下事情：

function loadCanvas(game) {
	alert('loading canvas');
}

<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>

在javascript中选择禁用加载功能直到按钮？

4 个答案: