如何绑定“touchstart”和“click”事件但不响应两者？

当用户触摸一个元素时会发生 touchstart 事件。但是当用户单击一个元素时会触发一个 click 事件。
通常，touchstart 和 click 事件都是在启用触摸和点击的设备中的同一次点击中触发的。因此，在这种情况下，如果浏览器由于单个用户输入而同时触发触摸和鼠标事件，则浏览器必须在任何鼠标事件之前触发 touchstart。

有两种流行的方法可以解决这个问题。

• 使用 preventDefault() 或 stopPropagation() 方法。
• 使用变量来检查它是“touchstart”还是“click”事件。

使用preventDefault()或stopPropagation()方法：此方法可防止事件处理程序同时响应 touchstart 和 clicks 事件。如果应用程序不希望在特定触摸目标元素上触发鼠标事件，则该元素的触摸事件处理程序应调用 preventDefault() 或 stopPropagation() 并且不会分派其他鼠标事件。

例子：

  

    Touchstart

  

    TouchStart and Click event
    click me
    
        
        // button element
        var button1 = document.querySelector("button"); 
        
        
        // touchstart handler
        button1.addEventListener("touchStart", onlyTouch, false); 
  
        function onlyTouch(ev) {
            
            // Call preventDefault() to prevent any further handling
            console.log("Here a touchstart event is trigerred"); 
            ev.preventDefault();
        }
  
        // click event handler
        button1.addEventListener("click", onlyClick, false); 
  
        function onlyClick(ev) {
  
            // Call preventDefault() to prevent any further handling
            console.log("Here a click event is trigerred"); 
            ev.preventDefault();
            console.log("After triggering an event");
        }
    

  

当触摸启动事件被触发时输出

Here a touchstart event is triggered
After triggering an event

但是，这也阻止了其他默认浏览器行为（如滚动）——尽管通常您完全在处理程序中处理触摸事件，并且您必须禁用默认操作。
此外，当用户在移动设备上点击网页中的元素时，非为移动交互而设计的页面在 touchstart 事件和鼠标事件处理 (mousedown) 之间有至少 300 毫秒的延迟。因此，必须添加一行 HTML 代码来描述页面不需要缩放。

使用变量来检查它是“touchstart”还是“click”事件：

例子：

  

    Touchstart

  

    TouchStart and Click event
    click me
    
    
  
    
        $("#button").on('touchstart click', function(event) {
            if (event.type == "touchstart") {
                $(this).off('click');
                console.log("Only touch event is fired");
            } else if (event.type == "click") {
                $(this).off('touchstart');
                console.log("Only click event is fired");
            }
        });
    

  

输出：

click event is triggered
After triggering an event