一个简单的h5页面实现img元素onlongpress长按事件

hackchen

于 2024-07-10 16:24:34 发布

阅读量95

点赞数 1

文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/hackchen/article/details/140327213

版权

在微信小程序中，image组件有show-menu-by-longpress实现长按时间，但是在Web开发中，没有专门的`onlongpress`事件，但是你可以使用`onmousedown`和`onmouseup`事件来模拟长按的效果。以下是一个简单的示例，展示了如何实现长按图片的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Press Event</title>
<script>
function setupLongPressDetector(element, callback) {
    var timeout = null;
    var longPressDelay = 500; // 长按的阈值，这里设置为500毫秒
 
    element.addEventListener('mousedown', function(event) {
        timeout = setTimeout(function() {
            callback(event);
        }, longPressDelay);
    });
 
    element.addEventListener('mouseup', function() {
        clearTimeout(timeout);
    });
 
    // 防止选中图片
    element.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
}
 
function handleLongPress(event) {
    console.log('Long press detected!', event);
    // 在这里处理长按事件
}
 
window.onload = function() {
    var img = document.getElementById('longPressImage');
    setupLongPressDetector(img, handleLongPress);
};
</script>
</head>
<body>
<img id="longPressImage" src="path_to_your_image.jpg" alt="Long Press Me">
</body>
</html>

hackchen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的h5页面实现img元素onlongpress长按事件

在微信小程序中，image组件有show-menu-by-longpress实现长按时间，但是在Web开发中，没有专门的。事件来模拟长按的效果。事件，但是你可以使用。
复制链接

扫一扫