如何绑定touchstart和click事件，但不响应这两个事件

当用户触摸一个元素时，会发生touchstart事件。但是，当用户点击一个元素时，点击事件被触发。
通常，在支持触摸和点击的设备中，触摸启动和点击事件都是在同一个点击中触发的。因此，在这种情况下，如果浏览器因为单一的用户输入而同时触发触摸和鼠标事件，浏览器必须在任何鼠标事件之前触发触摸启动。
有两种流行的方法来解决这个问题。

使用preventDefault（）或stopPropagation（）方法。
使用一个变量来检查它是一个 “触摸开始 “还是 “点击 “事件。

使用 preventDefault() 或 stopPropagation() 方法：该方法可以防止事件处理程序同时响应触摸开始和点击事件。如果一个应用程序不希望在一个特定的触摸目标元素上触发鼠标事件，该元素的触摸事件处理程序应该调用preventDefault()或stopPropagation()，没有额外的鼠标事件将被派发。
示例:

<html>
 
<head>
    <title>Touchstart</title>
</head>
 
<body>
    <h1>TouchStart and Click event</h1>
    <button id="button">click me</button>
    <script>
       
        // 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 triggered");
            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 triggered");
            ev.preventDefault();
            console.log("After triggering an event");
        }
    </script>
</body>
 
</html>

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

Here a touchstart event is triggered
After triggering an event

如何绑定touchstart和click事件，但不响应这两个事件

然而，这也会阻止其他默认的浏览器行为（如滚动）–尽管通常你完全是在处理程序中处理触摸事件，你必须禁用默认动作。
另外，当用户在移动设备上点击网页中的一个元素时，没有为移动交互设计的网页在触摸开始事件和处理鼠标事件（mousedown）之间至少有300毫秒的延迟。因此，必须添加一行HTML代码，描述该页面不需要缩放的情况。

<meta name="viewport" content="width=device-width, user-scalable=no">

使用一个变量来检查它是 “触摸开始 “还是 “点击 “事件：
示例:

<html>
 
<head>
    <title>Touchstart</title>
</head>
 
<body>
    <h1>TouchStart and Click event</h1>
    <button id="button">click me</button>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
 
    <script>
        ("#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");
            }
        });
    </script>
</body>
 
</html>

输出:

click event is triggered
After triggering an event

如何绑定touchstart和click事件，但不响应这两个事件

如何绑定touchstart和click事件，但不响应这两个事件

如何绑定touchstart和click事件，但不响应这两个事件

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 精品教程

回顶部

如何绑定touchstart和click事件，但不响应这两个事件

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 精品教程

回顶部

切换注册登录

用户名或邮箱

密码

切换登录注册

昵称

邮箱