Question

现在我不是真正使用Javascript的明星，但我似乎遇到了移动设备和onclick功能的所有已知问题。 Onclick需要一个鼠标操作，在手机上当然不适用。现在在Jquery中，您可以使用＆＃34; on＆＃34; ..但这如何与常规JavaScript一起使用？

// Get the modal
var modal = document.getElementById('reserveer-modal');

// Get the button that opens the modal
var btn = document.getElementById("reserveer-knop");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    var x = window.innerWidth;
    if (x > 768) {

        //event.preventDefault();
        modal.style.display = "block";
    } else {
        //event.preventDefault();
    }
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

尝试将onclick更改为addEventListener并查看是否有助于您..

// When the user clicks the button, open the modal 
btn.addEventListener('click', function () {
    var x = window.innerWidth;
    if (x > 768) {
        //event.preventDefault();
        modal.style.display = "block";
    } else {
        //event.preventDefault();
    }
});

您还可以将命名函数传递给addEventListener

Answer 2

将click事件侦听器绑定到该元素应该可以解决您遇到的问题。

btn.addEventListener("click", function() {
    var x = window.innerWidth;
    if (x > 768) {
        //event.preventDefault();
        modal.style.display = "block";
    } else {
        //event.preventDefault();
    }
});

或者，您可以尝试使用touchstart事件，它就像＆＃34; mousedown＆＃34;活动，仅限移动设备。

elem.addEventListener("touchstart", handler);

您的代码如下所示：

btn.addEventListener("touchstart", function() {
    var x = window.innerWidth;
    if (x > 768) {
        //event.preventDefault();
        modal.style.display = "block";
    } else {
        //event.preventDefault();
    }
});

Answer 3

遇到同样的问题，将z-index设置为100后就可以了。在我看来，这是z-index问题。

普通的javascript，onclick无法在移动设备

3 个答案: