Question

在我的网站上，台式机版本一切正常，但是当我切换到移动版时，一个按钮只能运行一次。一按后它什么也没做。

如果我按Enter，它可以正常工作，但是按按钮不会再次触发按钮。我特别不希望我的页面重新加载。

此答案涉及重新加载页面。

$("#quiz").on('touchstart click', 'button', function(e){
    e.preventDefault(); 
   
});

<h1 class="title">Quote Game!</h1>
<div class="container">
    <form id="quiz" name="quiz" autocomplete="off"><br>
        <container class="cont1">
            <p class="questionp">Which hero does this quote belong to? </p>
            <div class="row">
                <!--<div class="form-group float-label-control">-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p class="question"  id="questionquote"></p>  
                </div> 

                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
                    <p id = "number_correct" class="green"></p>
                </div>
        
                <script class="score">document.getElementById("number_correct").innerHTML = "Your Score: " + correct;</script>
             
                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <!-- <img src="transparent.gif" height="90" width="90" class="pull-right"> penguin picture-->
                </div>

                <input class="form-control" id="question1" name="question1" placeholder="Hero Name" onclick="IsEmpty();"  >
                <br> </br>

     
                <!--<input class="answer" id="question1" name="question1"></input><br> </br>-->
       
                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <!--<input id="button" class="btn btn-primary" type="submit" value="Check" onclick = "check(); ">-->
                    <button id ="button" value="Check" class="btn btn-primary " onclick = "check(); ">Check</button>
                </div>
            </div>
        </container>
    </form>
        
    <div  class="text-center">
        <img id="result" class="correct_answer" src="" height="350" width="90%">
    </div>
</div>

Answer 1

在适用于Android的Chrome 68下对您的代码进行了尝试，该按钮每次都可以使用。但是，有一些提示：

使用addEventListener（或jQuery.on()），而不是在HTML中使用嵌入式JavaScript。
如果要在运行代码后不提交表单，则可以使用return false代替e.preventDefault()。
我没有将事件处理程序附加到表单的意思只是将其过滤到按钮，并向按钮本身添加了另一个内联javascript函数。如果要一次调用两个不同的函数，请使用一个函数同时调用这两个函数。

Answer 2

尝试将按钮类型设置为按钮（而不是提交）这样，单击后按钮不会被浏览器禁用

<button type="button" id ="button" value="Check" class="btn btn-primary " >Check</button>

此外，不再需要e.preventDefault，如果您不想这样做，则必须使用js提交此表单

在移动模式下单击按钮时，按钮仅工作一次

2 个答案: