没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义javascript 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。 tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其
资源推荐
资源详情
资源评论
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介移动页面开发中的触摸事件与虚拟鼠标事件简介
触摸事件触摸事件(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()中进行编程即可,如下代码示例:
<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script type="text/java script">
$(document).ready(function(){
$(".tap-hold-test").bind("taphold", function(event) {
$(this).html("Tapped and held");
});
});
</script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li class="tap-hold-test">Tap and hold test</li>
</ul>
</div>
</div>
</body>
</html>
从上面的代码可以看到,将一个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 的正规化的事件
资源评论
weixin_38595689
- 粉丝: 4
- 资源: 910
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功