Question

我有一个网站，我正试图在移动设备上运行。但是，当我分别为PC和平板电脑组合click和touchstart事件时，两者都不起作用（单击附加事件的元素不会触发）。任何人都可以解释我应该如何解决这个问题？这是一个不起作用的元素的例子，笔有整个项目。

HTML

<div id="menu">
    <h1>MENU</h1>
</div>
<div class="dropdown hidden">
    <ul>
        <li id="home_navlink">Home</li>
        <li id="about_navlink">About Me</li>
        <li id="work_navlink">My Work</li>
        <li id="contact_navlink">Contact Me</li>
    </ul>
</div>

JS

let menu = document.getElementById("menu");
let dropdown = document.getElementsByClassName("dropdown")[0];
menu.addEventListener("click touchstart", function(){
    if(dropdown.classList.contains("showing")){
        dropdown.classList.remove("showing");
        dropdown.classList.add("hidden");
    }
    else{
        dropdown.classList.remove("hidden");
        dropdown.classList.add("showing");
    }
})

Pen

Answer 1

通过javascript获取菜单

let menu = document.getElementById("menu");
let dropdown = document.getElementsByClassName("dropdown")[0];

将处理函数声明为函数引用

let clickHandler = function() {
    if (dropdown.classList.contains("showing")) {
        dropdown.classList.remove("showing");
        dropdown.classList.add("hidden");
    } else {
        dropdown.classList.remove("hidden");
        dropdown.classList.add("showing");
    }
}

为点击事件指定

menu.addEventListener("click", clickHandler);

并检查触摸事件处理程序并为touchstart分配函数

if ('ontouchstart' in window) {
    menu.addEventListener("touchstart", function() {
        var touchHndl = function() {
            //call the clickHandler actually
            clickHandler();
            //remove the touchend haldler after perform
            this.removeEventListener(touchHndl)
        }
        //attach a handler for touch end when you are in touchstart event
        this.addEventListener(touchHndl);
    });
}

所以你在普通的javascript中询问代码段，希望它有帮助：）

Answer 2

如果你只是删除＆＃34; touchstart＆＃34;从事件侦听器中，创建一个包含事件实际主体的函数，并创建两个事件侦听器，一个用于单击，一个用于touchstart。我不认为你可以将多个事件本地绑定到一个监听器。

你设置了很多监听器，所以你可以使用一个函数来绑定多个事件的一个函数，例如：Binding multiple events to a listener。

此外，当您开始声明事件侦听器时会出现拼写错误：

inlineWorkLink.addEventListener("click touchstart", function(){});

Answer 3

const mytap = ( window.ontouchstart === null ) ? 'touchstart' : 'click';
xxx.addEventListener( mytap, (e) => {
// code
});

将click和touchstart事件组合在一起不起作用

3 个答案: