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

📅  最后修改于: 2022-05-13 01:56:01.363000             🧑  作者: Mango

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

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

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

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

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

例子:


  

    Touchstart

  

    

TouchStart and Click event

            

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



Here a touchstart event is triggered
After triggering an event

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

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

例子:


  

    Touchstart

  

    

TouchStart and Click event

                    

输出:

click event is triggered
After triggering an event