在html上绑定touch,实现html元素跟随touchmove事件的event.touches[0].clientX移动

最新推荐文章于 2023-10-10 20:12:30 发布

weixin_39631344

最新推荐文章于 2023-10-10 20:12:30 发布

阅读量670

点赞数

文章标签：在html上绑定touch

主要是使用了transform:translateX 实现

newWaterChart

* {

padding:0;

margin:0;

-webkit-box-sizing: border-box;

}

.chart-wrap {

background-color: #7ecef4;

}

.chart-container {

width:120%;

height: 250px;

padding-top: 100px;

transform: translateX(-20px);

}

.chart-item {

width: 20px;

line-height: 120px;

display: inline-block;

border: 1px solid white;

border-radius: 10px;

}

.flex-wrap {

display: flex;justify-content: space-around;

}

.flex-item {

}

.chart-wrap {

overflow: hidden;

}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39631344

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在html上绑定touch,实现html元素跟随touchmove事件的event.touches[0].clientX移动

主要是使用了transform:translateX 实现newWaterChart* {padding:0;margin:0;-webkit-box-sizing: border-box;}.chart-wrap {background-color: #7ecef4;}.chart-container {width:120%;height: 250px;padding-top: 100px;tr...
复制链接

扫一扫

touch事件解析

qq_32550037的博客

09-20

759

touch事件解析 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上离开的时候触发。touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具

【JavaScript 教程】事件——触摸事件

油墨香^-^的博客

06-10

785

作者 |阮一峰 1、触摸操作概述浏览器的触摸 API 由三个部分组成。 Touch：一个触摸点 TouchList：多个触摸点的集合 TouchEvent：触摸引发的事件实例 Touch接口的实例对象用来表示触摸点（一根手指或者一根触摸笔），包括位置、大小、形状、压力、目标元素等属性。有时，触摸动作由多个触摸点（多根手指）组成，多个触摸点的集合由TouchList接口的实例对象表示。TouchEvent接口的实例对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件.

参与评论您还未登录，请先登录后发表或查看评论

触摸（Touch）事件

This is HuangWenJun' CSDN.

02-15

1340

Touch事件： touches：当前位于屏幕上的所有手指的一个列表 targetTouches：位于当前DOM元素上的手指的一个列表； changedTouches：涉及当前事件的手指的一个列表； screenX，screenY：触摸点相对于屏幕上边缘的坐标； clientX，clientY：触摸点相对于浏览器的viewport左边缘的坐标，不包括左边的滚动距离； pageX，pag...

事件之触摸及手势事件

xiaoyangzhu的博客

12-22

1657

一触摸事件触发场景：当手指放在屏幕上、在屏幕上滑动或从屏幕移开时，触摸事件即会触发触摸事件：事件定义 touchstar 手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上） touchmove 手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动 touchend 手指从屏幕上移开时触发 touchcancel 系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪属性大全：鼠标事件的公共.

HTML5触摸事件(touchstart、touchmove和touchend)

热门推荐

fuqinyijiu的专栏

11-20

22万+

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员

触摸事件(touchstart、touchmove和touchend)

weixin_42349568的博客

10-23

2万+

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。　　touchend事件：当手指从屏幕上离开的时候触发。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。　　touches：表示当前跟踪的触摸操作的touch对象的数组。

html5 touch事件实现触屏页面上下滑动(一)

09-28

通过监听和处理这些事件，我们可以精确地控制元素在用户触摸屏幕时的行为，实现流畅的上下滑动体验。在实际开发中，可能还需要考虑其他因素，比如滑动速度、方向检测以及防止误触等，以提供更完善的用户体验。

HTML5触摸事件(touchstart、touchmove和touchend)的实现

11-20

通过在`touchmove`事件处理函数中调用`event.preventDefault()`，开发者可以阻止页面的滚动，实现自定义的滚动效果或者滑动操作。 3. **touchend事件**：当用户的手指离开屏幕时触发。这标志着一次触摸操作的结束。...

js实现touch移动触屏滑动事件

12-04

在移动端开发中，为了实现类似图片轮播的滑动效果，我们需要利用JavaScript处理移动设备上的触摸事件（touch events）。在PC端，我们通常使用click、mouseover等事件，但在触摸屏设备上，这些事件无法捕捉到手指滑动...

HTML5实现的手机上下滑动翻页特效源码.zip

11-04

再者，JavaScript或jQuery库可以用于监听用户的触摸事件，如`touchstart`、`touchmove`和`touchend`，这些事件在移动设备上触发时，可以捕捉到用户的手势动作。通过计算手指滑动的距离和方向，可以判断是否触发翻页...

整理HTML5移动端开发的常用触摸事件

09-28

2. `touchmove`事件：当用户在屏幕上移动手指时连续触发，可以用来处理滑动或平移操作。通过调用`event.preventDefault()`，开发者可以阻止页面的默认滚动行为，从而实现自定义的滚动效果或其他交互。 3. `touchend...

移动端touchmove实现div的拖动拖拽移动效果

最新发布

qq_62267045的博客

10-10

1884

移动端拖动效果,touchmove的使用，touch事件的示例，网页悬浮窗拖动拖拽移动效果

TouchEvent

个人博客

08-20

626

手指接触屏幕就触发，就触发一次@touchend手指从屏幕抬起松开触发一次@touchmove手指在屏幕滑动手指点击，立刻抬起松开，触发一次 touchstart，触发一次touchend，不触发touchmove手指按住，开始移动，触发一次 touchstart，按住移动的过程中持续触发touchmove，抬起松开触发一次 touchendtouchmove 事件中，中途移动到其他元素，Touch对象并不会改变，还是touchstart 一开始的对象。

触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例

weixin_34297300的博客

08-08

1442

触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例一、分享到：前面我们介绍过移动设备中一些设备事件，例如手机旋转90度、倾斜等设置放置姿态变化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件...

「移动端」touch事件，touchEvent对象

前端人的博客

08-25

1876

随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove，而移动端使用的 touchstart、touchmove、touchend 。一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意

移动端手指滑动，高度跟随手指滑动位置而改变

我灰灰凭啥输

12-01

1455

效果：列表刚开始显示高度为200，手指滑动，列表高度随手指位置改变，列表最高高度为500 实现这个功能之前先说一下手指触摸事件 //手指按下触发 touchstart(event) { var touch = event.touches[0]; this.startY = touch.pageY; this.startX = touch.pageX; event.stopPropagation(); }, //手指移动触发 touchmove(event) {

JS 键盘事件、触摸事件

boonyaxnn的博客

04-10

463

一、键盘事件：指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发功能键无法响应 keyup: 键盘抬起时触发注意： 1.keydown keypress 按下不放一直触发； 2.keypress无法触发功能键 3.keypress无法捕获组合键 4.keypress 可以区分大写字母和小写字母 5.keydown 可以区分小键盘上...

手机端--1.手指拖动touchmove，e.touches[0].clientX

w3cgirl-赵娜的播客

11-19

5636

案例：图片可以随着手指的拖动而变动 1.e.touches[0].clientX 手指横坐标 2. 最后所求： nowX, nowY 图片的横纵坐标 nowX = 手指横坐标 - 误差 3. 已知条件：误差 deltaX = 手指横坐标 - nowX (一开始给个初始值) deltaX 固定手指初始按下与手指移动的过...

确定event 里面存在pageX 或 originalEvent.touches[0].pageX吗

07-15

在常见的浏览器事件对象中，确实存在 `pageX` 和 `originalEvent.touches[0].pageX` 属性。但需要注意的是，不同的事件对象可能会提供不同的属性来表示页面上的X坐标。在鼠标事件对象（如 `click`、`mousedown`、`mousemove`、`mouseup` 等）中，可以直接通过 `event.pageX` 来获取鼠标相对于页面的X坐标。在触摸事件对象（如 `touchstart`、`touchmove`、`touchend` 等）中，可以通过 `event.touches[0].pageX` 或 `event.changedTouches[0].pageX` 来获取触摸点相对于页面的X坐标。这里需要注意的是，触摸事件对象中的坐标信息存储在 `touches` 数组或 `changedTouches` 数组中，我们需要通过索引 `[0]` 来获取第一个触摸点的坐标。以下是一个示例代码，展示了如何根据不同的事件类型获取页面上的X坐标： ```javascript $("#flipbook").on("mousedown touchstart", function(event) { var startX; if (event.pageX) { startX = event.pageX; // 鼠标事件 } else if (event.touches && event.touches.length > 0) { startX = event.touches[0].pageX; // 触摸事件 } console.log("startX:", startX); }); ``` 在上述示例中，我们使用了 `mousedown` 和 `touchstart` 事件来监听鼠标和触摸事件，并通过判断事件对象的属性来获取页面上的X坐标。请注意，以上示例仅适用于常见的浏览器事件对象，不同的事件类型可能会提供不同的属性来表示坐标信息。确保在使用时，根据实际的事件类型和事件对象来获取正确的坐标信息。希望这能解决你的疑问。如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交