点击屏幕上的图片js移动端
可以使用touch事件来实现点击屏幕上的图片。具体步骤如下:
-
给图片添加touchstart事件监听器,当用户触摸屏幕时触发该事件。
-
在事件处理函数中,使用e.touches[0]获取触摸点的坐标。
-
判断触摸点是否在图片上,可以使用element.getBoundingClientRect()方法获取图片的边界信息,然后判断触摸点是否在图片的边界内。
-
如果触摸点在图片上,则执行相应的操作,比如跳转到另一个页面。
下面是一个示例代码:
var img = document.querySelector('img');
img.addEventListener('touchstart', function(e) {
var rect = img.getBoundingClientRect();
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
// do something
}
});
注意,这只是一个简单的示例,实际应用中可能需要对触摸事件进行更多的处理,比如处理多点触摸、滑动等情况。
原文地址: https://www.cveoy.top/t/topic/bG5B 著作权归作者所有。请勿转载和采集!