【h5长按事件】H5页面监听长按和点击事件
在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),则会执行点击的逻辑。
评论已关闭