javascript - 纯 javascript，onclick 不适用于移动设备

Question

现在我不是真正的 Javascript 明星，但我似乎遇到了移动设备和 onclick 功能的众所周知的问题。 Onclick 需要在不适用的手机上进行鼠标操作。现在在 Jquery 中，您可以使用“on”..但是它如何与常规 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