博客

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

  • Post category:jquery

要绑定touchstart和click事件，但不响应这两个事件，需要借助一些技巧。以下是详细的步骤和示例说明：

步骤

  1. 定义一个全局变量来判断是否支持触摸屏：

javascript
var isTouchDevice = ('ontouchstart' in document.documentElement);

这里直接判断浏览器是否支持触摸屏，如果支持，isTouchDevice的值为true。

  1. 在绑定事件时，先取消click事件的默认处理：

javascript
document.addEventListener('click', function (e) {
e.preventDefault();
}, false);

这里监听全局的click事件，阻止其默认行为，即不会有跳转、刷新等操作。

  1. 在绑定事件时，使用touchstart替代click：

javascript
var el = document.getElementById('example');
if (isTouchDevice) {
el.addEventListener('touchstart', function (e) {
e.preventDefault();
}, false);
} else {
el.addEventListener('click', function (e) {
e.preventDefault();
}, false);
}

这里先获取需要绑定事件的元素，然后根据是否支持触摸屏来选择绑定touchstart或click事件。在绑定touchstart事件时，同样阻止其默认行为，防止页面滚动。

示例说明

  1. 绑定事件不响应touchstart

这个例子中，我们要实现一个按钮，在触摸屏设备上点击无效。

html
<button id="btn">Click me!</button>

javascript
var isTouchDevice = ('ontouchstart' in document.documentElement);
document.addEventListener('click', function (e) { e.preventDefault(); }, false);
var btn = document.getElementById('btn');
if (isTouchDevice) {
btn.addEventListener('touchstart', function (e) { e.preventDefault(); }, false);
} else {
btn.addEventListener('click', function (e) { e.preventDefault(); }, false);
}

  1. 绑定事件不响应click

这个例子中，我们要实现一个链接，在点击链接时无效。

html
<a href="https://www.example.com/" id="link">Click me!</a>

javascript
var isTouchDevice = ('ontouchstart' in document.documentElement);
document.addEventListener('click', function (e) { e.preventDefault(); }, false);
var link = document.getElementById('link');
if (isTouchDevice) {
link.addEventListener('touchstart', function (e) { e.preventDefault(); }, false);
} else {
link.addEventListener('click', function (e) { e.preventDefault(); }, false);
}

这个例子中，与第一个例子类似，只是将按钮换成了链接。同样需要阻止默认行为来禁用链接跳转。

Tags: