手机移动端-touch 手指触摸移动事件

缺乏、安全感 2022-12-22 13:24 216阅读 0赞

## touch：事件可以分为三个 touchstart，touchmove，touchend ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<title>手指拖拽移动</title>
    	<style> #con, #con2{ width: 100px; height: 100px; background: red } </style>
    </head>
    <body>
    	<div id="con"></div>
    	<div id="con2"></div>
    	<script> let con = document.getElementById('con'), startX , startY, moveX, moveY, disX, disY; document.addEventListener('touchstart', function(e){ // 手触碰点击 startX = e.targetTouches[0].clientX startY = e.targetTouches[0].clientY }) document.addEventListener('touchmove', function(e){ // 手拖拽，移动 moveX = e.targetTouches[0].clientX moveY = e.targetTouches[0].clientY disX = moveX - startX disY = moveY - startY // e.target 可以获取手点击的任意元素 e.target.style.transform = "translate(" + disX + "px," + disY + "px)" }) document.addEventListener('touchend', function(e){ // 手松开 // 松开手后自动恢复原位置 e.target.style.transform = "translate(" + 0 + "px," + 0 + "px)" }) </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关手机移动端-touch 手指触摸移动事件

touch：事件可以分为三个 touchstart，touchmove，touchend <!DOCTYPE html> <html lang="en">

缺乏、安全感/ 2022年12月22日 13:24/ 0 赞/ 217 阅读

相关 css控制移动端手指触摸与抬起样式变化

主要是:active这个属性 <div> <img src="@assets/img/square/timg.jpg" alt="" /> </d

悠悠/ 2022年11月04日 12:28/ 0 赞/ 256 阅读

相关移动端WEB开发，click,touch,tap事件

1、click 和 tap 事件比较两者都会有点击时触发，但是在手机WEB端，click会有200~300ms的延迟，所以用zepto的tap代替click作为点

素颜马尾好姑娘i/ 2022年07月19日 11:49/ 0 赞/ 245 阅读

相关移动端web开发---Touch事件详解

一、pc端事件回顾 HTML事件、DOM0事件、DOM2事件事件对象。如果上述概念不清楚，请先去了解。二、移动端事件简介 2.1 pc端事件在移动端的

╰+攻爆jí腚メ/ 2022年06月15日 09:18/ 0 赞/ 512 阅读

相关 angularJS 实现移动端触摸事件Touchstart Touchmove

angular 移动端开发，启用ngTouchstart,ngTouchmove,ngTouchend 1. app.js引用 .directive("ngTou

缺乏、安全感/ 2022年06月08日 14:39/ 0 赞/ 385 阅读

相关 unity手指触摸事件

Unity 触屏操作当将Unity游戏运行到IOS或Android设备上时，桌面系统的鼠标左键可以自动变为手机屏幕上的触屏操作，但如多点触屏等操作却是无法利用

缺乏、安全感/ 2022年06月07日 12:23/ 0 赞/ 426 阅读

相关移动端 - touch事件

touch 事件在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式 `touchstart` 手指触碰

矫情吗；*/ 2022年05月19日 07:21/ 0 赞/ 268 阅读

相关 web app移动端开发_案例、touch事件

步骤：　　1、建好项目目录（html、css、js分离）　　2、设置视口，不允许缩放　　3、设置公共样式（样式重置 + 添加新的样式）　　4、为大部分标

柔情只为你懂/ 2021年12月22日 22:19/ 0 赞/ 358 阅读

相关 vue移动端touch事件

开始事件： @touchstart 移动事件： @touchmove 结束事件： @touchend // 获取事件对象 @touchend="touc

约定不等于承诺〃/ 2021年12月11日 05:37/ 0 赞/ 449 阅读

相关 JS 移动端的 Touch 事件使用

JS 移动端的 Touch 事件使用随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseo...

小灰灰/ 2020年06月02日 13:18/ 1 赞/ 858 阅读