首页 > 代码库 > 小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

2024-07-03 04:35:36   222人阅读

当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。

一、轻击与按住

直接上代码（一切皆在代码中，细细品吧！）

<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css" >tap：轻击事件
taphold:按住事件
二、轻扫
轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动，会触发swipeleft事件或者swiperight事件。
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css" >上面代码中用到了一个技巧，在界面切换过程中如果需要改变切换效果，则必须使用超级链接了实现，将该链接的display属性设为none，在监听函数中调用click()方法执行界面切换，然后在链接中添加data-transition进行切换效果设置。
三、虚拟鼠标事件
事件含义
vmouseover触控或者滑动DOM容器之上
vmoseout触控或者滑动离开
vmousedown触摸或者按下
vmoseup触摸结束或者鼠标按键释放
vclick触摸结束或鼠标按键被释放
 vclick事件通常在vmouseup事件后300ms触发
vmousecancel触控事件中发起mousecancel事件时触发
............
............
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href=http://www.mamicode.com/"css/jquery.mobile-1.0.1.min.css" >


联系
我们