【h5长按事件】H5页面监听长按和点击事件
warning:
这篇文章距离上次修改已过450天，其中的内容可能已经有所变动。
在H5页面中，可以使用JavaScript监听contextmenu和mousedown事件来分别处理长按和点击事件。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长按和点击事件</title>
<script>
window.onload = function() {
var longPressTimer;
var element = document.getElementById('myElement');
element.addEventListener('contextmenu', function(e) {
e.preventDefault();
longPressTimer = setTimeout(function() {
alert('长按事件触发');
}, 1000); // 设置长按的时间为1000毫秒
});
element.addEventListener('mouseup', function(e) {
e.preventDefault();
clearTimeout(longPressTimer);
if (e.which == 1) { // 判断是否是鼠标左键点击
alert('点击事件触发');
}
});
};
</script>
</head>
<body>
<div id="myElement" style="width: 200px; height: 100px; background-color: #00FF00;">长按或点击这里</div>
</body>
</html>在这个示例中，我们为目标元素添加了contextmenu和mouseup事件监听器。当用户长按时，会触发contextmenu事件，并设置一个定时器。如果在设定的时间内用户释放鼠标按钮，则会触发mouseup事件，并清除定时器。如果用户按住鼠标之后并没有释放鼠标按钮，则会执行长按的逻辑。如果是鼠标左键点击（which属性等于1），则会执行点击的逻辑。
评论已关闭