触摸事件-Jquery 触摸事件

最新推荐文章于 2023-06-07 10:57:29 发布
最新推荐文章于 2023-06-07 10:57:29 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： JavaScript笔记本

touch是触摸事件组

  • touchstart 当手指触摸屏幕
  • touchmove 当手指在屏幕上移动
  • touchend 当手指离开屏幕
  • touchcancel 当被迫终止滑动

touchList是触摸点

  • changedTouches 改变后的触目点集合

每个点都会去记录

  • targetTouches 当前元素触摸点集合

手指离开了不会记录

  • touches 页面上所有触摸点的集合

手指离开了不会记录

滑动的实现原理

就是让触摸的元素随着手指的滑动做位置的改变
元素位置的改变需要当前触摸点的坐标和一开始手指的坐标

原生获取坐标
	e.touches[n] .  ~~
	clientX  clientY   --基于视窗
	pageX   pageY   --基于页面
	screenX  screenY ---基于屏幕
jQuery 获取坐标
	startx=e.originalEvent.touches[0].clientX;
四月四日梦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery -- touch事件 滑动判断---左右上下方向
qq_41981057的博客
04-23 1814
//定义变量，用于记录坐标和角度 var startx,starty,movex,movey,endx,endy,nx,ny,angle; // //开始触摸函数，event为触摸对象 function touchs(event){ console.log(JSON.stringify(event.target)) //阻止浏览...
jQuery系列（一） -- touch jQuery
CZBBhkrx的博客
01-30 436
封装函数 尽管 DOM 提供了 API ，可是当我们使用 DOM API 的时候却不尽人意，它提供的功能实在是有限，并且有些方法还没有，所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟，第二个函数作用是可以对一个节点添加或者删除 class 。 获取一个元素节点的所有兄弟 当调用 getSiblings 函数的时候只需要传入一个元素节点即可。
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
11-26
触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时，您可以触发任何自定义javascript 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。 tap(轻击)：一次快速完整的轻击后触发 taphold（轻击不放）：轻击并不放（大约一秒）后触发 swipe(滑动)：一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其
html jquery手机触摸事件,HTML5的触摸事件
weixin_42510805的博客
06-07 548
本文主要介绍HTML5实战与剖析之触摸事件，介绍的比较详细，需要的朋友可以参考下。HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。一开始触摸事件touchstart、touc...
触摸滚动JQ
m0_53553562的博客
02-01 362
直接上代码 js var start=0,end=0,disy=0,disx=0; var items=$('.wrap li'); var x=0; // 保存下标 document.addEventListener('touchstart',function (ev) { //当手指触摸屏幕时触发 start={ x:ev.touches[0].pageX, y:ev.touches[0].pageY
jQuery Mobile 触摸事件实例
10-22
主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。
鼠标双击或触摸双击事件检测jQuery插件
12-11
本文将深入探讨一个针对鼠标双击和触摸屏双击事件检测的jQuery插件——jQuery-doubleTap。 **一、插件简介** jQuery-doubleTap是一款专门用于检测鼠标双击和移动设备触摸屏双击事件的插件。它通过优化"click"和...
jQuery触摸鼠标双击事件检测特效代码
03-20
本项目"jQuery触摸鼠标双击事件检测特效代码"正是这样一款插件，它专注于实现鼠标双击和触摸屏幕双击事件的检测。 首先，让我们详细了解一下jQuery中的事件处理。jQuery提供了`.on()`方法来绑定事件处理函数，例如...
jquery touch_jQuery Touch应用程序开发：功能丰富的应用程序的强大技术
culing2941的博客
09-12 191
jquery touch In today’s scenario, the smartphone is leading ahead of the mobile as well as desktop/laptop. Owing to which, there is the huge demand for feature-rich applications that are not only fun...
基于jQuery的轻量级touch事件库
08-09
基于jQuery的轻量级touch事件库 demo: photo-slide 支持移动端和pc端 touchstart touchmove touchend
jquery.touch
07-04
基于zepto.touch.js修改。作为jquery的插件，兼容PC端。支持tap、singleTap、doubleTap、longTap、swipe、swipeLeft、swipeRight、swipeUp、swipeDown
jquery-touch:在jquery的基础上扩展触摸事件
05-21
jquery-touch 在jquery的基础上扩展触摸事件，由百度Touch.js改进而来 使用： $('#id').on('pinchstart pinchend pinch pinchin pinchout rotateleft rotateright rotate swipestart swiping swipeend swipeleft swiperight swipeup swipedown swipe drag dragstart dragend hold tap doubletap', function(event) { // 事件详细信息在：event.detail console.log(event.detail); });
touch.js JQuery touch插件
06-22
综合改进了zepto和JQuery mobile的touch和swipe功能，下面是DEMO touch demo touch demo 相对已滑动：X:0|Y:0 滑动距离：0 $(function () { var $btn = $('button') $btn.on('tap dbltap longtap', function (e) { $('#event').html(e.type) }); $btn.swipe(function (e, data) { $('#event').html(e.type); $('#distanceobj').html("dist[X:" + data.X + "|Y:" + data.Y + "]") }); $btn.on('swipeleft swiperight swipeup swipedown', function (e, data) { $('#event').html(e.type); $('#distance').html(data) //滑动距离 }) })
移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
qq316895454的专栏
04-15 1452
1、Touch事件简介 pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod  Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽
手机触屏事件（jquery）
ICY___的博客
03-01 1232
在移动端，点击事件和悬停事件都同统一为点击事件，所以对于手机或者带有触屏的电子设备来说，触屏事件不可忽视，当然，在不可触摸的屏幕上，这写事件就没有作用了。 触摸开始事件：touchstart 当手指放在屏幕上时触发，一次性事件 触摸移动事件：touchmove 当手指在屏幕上移动时触发，连续事件 触摸结束事件 touchend​​​​​​​ 与前两者搭配使用，用于判断事件是否完成 ...
移动端触摸事件 js jQery监听点击及释放点击
weixin_49098968的博客
06-07 585
在做手机端页面时，ui给了一个交互效果是在点击时添加某种样式，点击释放后此样式消失。touchstart、touchend事件
jQuery入门之放大镜案例（js touch触屏特效）
小小小森屿的博客
05-16 680
js touch触屏特效 jQuery入门之放大镜案例
jquery -- 触屏设备touch事件
weixin_33816611的博客
06-12 166
几种普及得比较好的触摸事件，你可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）： touchstart：触摸开始的时候触发 touchmove：手指在屏幕上滑动的时候触发 touchend：触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）： touches：当前位于屏幕上的所有手指的列表。 targetTo...
jquery触摸事件取消默认行为
最新发布
06-25
jQuery 提供了一套丰富的触摸事件处理方法，用于响应移动设备上的触摸操作，例如滑动、点击和长按时。取消触摸事件的默认行为通常是为了自定义这些事件的行为，而不是让浏览器执行其内置的行为。 取消触摸事件的默认行为通常是通过 `event.preventDefault()` 方法来实现的。这个方法会阻止事件的默认动作，比如防止链接跳转、表单提交等。当你希望阻止触发动画或阻止元素的位置改变（如在滑动事件中）时，可以这样做： ```javascript $(document).on('touchstart touchmove touchend', function(event) { if (/* 在这里判断需要阻止的条件 */) { event.preventDefault(); // 取消默认行为 } // 其他处理触摸事件的代码... }); ``` 在这个例子中，你需要根据具体的触摸事件和你的需求来判断是否应该调用 `event.preventDefault()`。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值