移动设备上按钮点击无效

Question

移动设备上按钮点击无效

3

我有一个表单，底部有两个按钮。

<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();
        }

- Vlatko Murković

send_message的定义是什么？ - itzmukeshy7

在原始帖子中添加了send_message函数。即使链接不起作用，我做错了什么？当我在按钮的div内使用onclick标签调用它时，相同的函数在桌面视图上可以正常工作。 - Vlatko Murković

我不太明白你所说的用警告来跟踪它的意思。但是我已经在 send_message() 函数所在的文件中设置了断点，当我点击按钮时，它并没有执行到那一部分。但是当我在桌面上运行时，断点是有效的。 - Vlatko Murković

如果（/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i.test（navigator.userAgent））{ 如果（'ontouchend' in document ||（/windows phone / i.test（navigator.userAgent.toLowerCase（））））{ EventType =（document.ontouchstart！== null）？'click'：'touchend'; } } 使用此代码为桌面和移动设备定义事件，并使用EventType而不是click或tuchstart，在按钮上正确编写事件，例如body.on EventType选择器和函数。 - Rajiv

1

那就是问题所在，还有另一个 div 盖住了按钮。我已经在按钮上设置了更高的 z-index 数字，现在即使使用原始选项（内联 onclick="send_message()"），它也可以正常工作了。抱歉打扰您了。感谢您的帮助。 - Vlatko Murković

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ram · Accepted Answer

可能您需要在定义send_message()的同一文件中编写click函数，同时click定义应该在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>

这个答案（This answer）也可能对你有帮助。