热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

这篇文章主要介绍了jQuery移动页面开发中的触摸事件与虚拟鼠标事件的简单编写方法,jQuery是当今人气最高的Javascript库并被广泛应用于移动web的开发,需要的朋友可以参考下

触摸事件(touch)
在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。

tap(轻击):一次快速完整的轻击后触发

taphold(轻击不放):轻击并不放(大约一秒)后触发

swipe(滑动):一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其相关联的属性,分别为

scrollSupressionThreshold (默认: 10px) – 水平方向拖拽大于这个值,将不触发。
durationThreshold (默认: 1000ms) – 滑动时间超过这个数值就不会产生滑动事件。
horizontalDistanceThreshold (默认: 30px) – 水平划动距离超过这个数值才会产生滑动事件。
verticalDistanceThreshold (默认: 75px) – 竖直划动距离小于这个数值才会产生滑动事件。
swipeleft(左划):划动事件为向左的方向时触发

swiperight(右划):划动事件为向右的方向时触发

 

要绑定这些事件,只需要在document.ready()中进行编程即可,如下代码示例:




 
 
 
 
 



 

Header

  • Tap and hold test

从上面的代码可以看到,将一个list列表跟taphold事件进行了绑定,当DOM加载完毕后,当触发taphold事件后,就会显示Tapped and held的提示信息。


虚拟鼠标事件
我们提供了一系列"虚拟的"鼠标事件试图把鼠标和触摸事件抽象 出来。这使得开发者能够给一些基础的鼠标事件,例如mousedown, mousemove, mouseup, 和click来注册监听。插件会在触摸环境中,插件会保持在传统鼠标环境下触发的顺序,例如:vmouseup总是在vmousedown之前被触发,vmousedown总是在 vmouseup 之前,等等。虚拟鼠标事件也会把书剑中放出的坐标信 息标准化。所以在基于触摸的设备中事件对象的pageX, pageY, screenX, screenY, clientX, and clientY这些属性的坐标都可以用。

vmouseover:处理touch 或者 mouseover的正规化的事件

vmousedown:处理touchstart 或者 mousedown 的正规化的事件

vmousemove:处理touchmove 或者 mousemove 的正规化的事件

vmouseup:处理touchend 或者 mouseup 的正规化的事件

vclick:处理touchend 或者 鼠标点击 的正规化的事件。在基于触摸的设备上,这个事件是在vmouseup事件之后触发的。

vmousecancel:处理touch 或者 mouse 的mousecancel的正规化的事件

警告:小心使用vclick
小心在触摸设备使用vclick。Webkit内核的浏览器会在touchend事 件触发后300ms自己生成mousedown, mouseup,和click 3个事件。 这些生成的鼠标事件的目标会在他们触发的时候被计算出来,并且 是基于touch事件的位置,并且有些情况下会在不同的设备上甚至 相同设备的不同OS会导致不同的计算结果。这就意味着原始的点击 事件的目标语浏览器自己生成的鼠标事件的目标元素可能不是同一个。
我们建议在触摸后可能会改变你点击的点下面内容的事件中,使用 click而不是vclick方法。这样的事件包括页面转场和其他的一些行为比如 收缩/伸展 这样 的 可能会导致屏幕有变化或者内容完全被替换的事件。

取消一个元素默认点击的行为
应用会调用一个 vclick 事件来取消某个元素的默认点击事件。在 基于鼠标的设备上,对vclick事件调用preventDefault()方法等同 于对真实点击的时间冒泡阶段调用 preventDefault() 方法。在基 于触摸的设备上就有点复杂了,因为真实的点击事件会在vclick 事件触发300毫秒之后触发。对于触摸设备,对vclick事件调用 preventDefault()方法会一些vmouse插件的一些代码来试图捕获下 一个点击事件。所以根据上述的警告,要匹配一个触摸事件和与他 对应的鼠标事件就比较困难,因为他们的目标是不同的。所以 vmouse插件试图通过坐标来识别一个相符的点击事件通常会失败。
有些情况下两个事件的目标和坐标的识别都会失败,这样就会导致 点击事件被触发或者元素的默认动作会被执行,或者内容被改变或 者替换的情况下,触发了别的元素的点击事件。如果这样的bug在给定的元素上有规律的发生,我们建议对于动作使 用click来驱动触发。


推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
    本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • angular.element使用方法及总结
    2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • jQuery :nthchild前有无空格的区别
    :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。然后,我写了如下h ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
author-avatar
mobiledu2502871653
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有