按钮点击不适用于手机

button click not working on mobile

本文关键字:适用于 手机 不适用 按钮      更新时间:2023-09-26

所以我有一个在底部有两个按钮的表单。

<div class="col-xs-12">
    <div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
    <a href="/how_to_book.php">
        <div class="how-to-book-button-mobile">
            How to book?
        </div>
    </a>
</div>

最初,我在submit-button-mobile上有onclick="send_message();"(适用于桌面,但不适用于移动设备。此外,标签在移动设备上也不可点击。

我在这里搜索过,找到了这个答案,使其在移动上工作

        $('.submit-button-mobile').on('click touchstart', send_message);
        $('.how-to-book-button-mobile').on('click touchstart', function() {
            window.location.href = "/how_to_book.php";
        });

仍然存在同样的问题,在移动设备上不可点击(在带有移动视图的chrome开发工具上尝试过,在iphone和android上尝试过)。

send_message()位于文件顶部的另一个.js文件中。看起来像这个

function send_message()
        {
            var a=document.forms["Form"]["name"].value;
            var b=document.forms["Form"]["email"].value;
            var c=document.forms["Form"]["message"].value;
            var d=document.forms["Form"]["surname"].value;
            document.getElementById("contact_message").innerHTML = "Sending your message... Please wait.";
            loadXMLDoc(a, b, c, d);
        }

        //pomocna funkcija za validaciju emaila
        function validateEmail(email) {
            var re = /^(['w-]+(?:'.['w-]+)*)@((?:['w-]+'.)*'w['w-]{0,66})'.([a-z]{2,6}(?:'.[a-z]{2})?)$/i;
            return re.test(email);
        }
        //funkcija za slanje emaila
        function loadXMLDoc(name, mail, message, surname)
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("contact_message").innerHTML=xmlhttp.responseText;
                document.getElementById("contact_message2").innerHTML=xmlhttp.responseText;
                }
              }
            // xmlhttp.open("GET","send_enquiry.php",true);
            xmlhttp.open("POST","send_enquiry.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("name=" + name + "&email=" + mail + "&message=" + message + "&surname=" + surname);
            xmlhttp.send();
        }

可能您必须在定义send_message()定义的同一文件中编写单击函数,并且单击定义应该在document.ready()函数中。首先检查您是否在点击div.时收到警报

$(document).ready(function() {
$('.how-to-book-button-mobile').on('click touchstart', function(e) {
					e.preventDefault();
           alert("how-to-book-button-mobile");
});
$('.submit-button-mobile').on('click touchstart', function(e) {
           e.preventDefault();
           alert("submit");
});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="col-xs-12">
    <div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
    <a href="#">
        <div class="how-to-book-button-mobile">
            How to book?
        </div>
    </a>
</div>

这个答案也可能对你有所帮助。