jQueryMobile的(十八) 触摸事件(touch)

最新推荐文章于 2021-06-07 12:28:16 发布

游可

最新推荐文章于 2021-06-07 12:28:16 发布

阅读量5.3k

点赞数

分类专栏： jQuery Mobile 文章标签： jquery mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/14119719

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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

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

taphold（轻击不放）：轻击并不放（大约一秒）后触发

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

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

swipeleft（左划）：划动事件为向左的方向时触发

swiperight（右划）：划动事件为向右的方向时触发

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <style type="text/css">
    .item-title {padding: 25px 10px; }
    #fixed-fullscreen-content {margin-top: 0; }
  </style>

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
    $(document).bind('mobileinit', function(){
      $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
      $.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
    });
    
    $(function(){
      $("#home").live('swipeleft', function() {
        $('#toPage2').click(); // 为首页绑定向左划动事件
      });
      $("#page-2").live('swiperight', function() {
        $('#toHome').click(); // 为另一页面绑定向右划动事件
      });
    });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>

  <div data-role="page" id="home">

    <div data-role="header">
      <h1>jQuery Mobile Demo</h1>
    </div>

    <div data-role="content">
      
      <p>本例子中，为两个页面的 body 元素分别绑定了 swipeleft 和 swiperight ，划动后分别触发相应的链接，转到另一个页面，另外使用 data-transition="slide" 把页面过场改为“滑动”效果，从而达到 Apps 中常用的滑动换页效果。</p>
      <a id="toPage2" href="#page-2" data-role="button" data-transition="slide" data-theme="b">向左滑动触发我这个链接</a> 
    </div>

    <div data-role="footer">
      <h2>Demo By </h2>
    </div>
  </div>




  <div data-role="page" id="page-2">

    <div data-role="header">
      <h1>jQuery Mobile Demo</h1>
    </div>

    <div data-role="content">   
      <a id="toHome" href="#home" data-role="button" data-theme="b" data-transition="slide" data-direction="reverse" data-rel="back">向右滑动触发我这个链接</a>   
    </div>

    <div data-role="footer">
      <h2>Demo By </h2>
    </div>

  </div>

</body> 
</html>

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

 $(function(){
      $("#home").live('tap', function() {
        $('#toPage2').click(); // 为首页绑定点击事件
      });
      $("#page-2").live('tap', function() {
        $('#toHome').click(); // 为另一页面绑定点击事件
      });
    });

taphold（轻击不放）：轻击并不放（大约一秒）后触发

$(function(){
      $("#home").live('taphole', function() {
        $('#toPage2').click(); // 为首页绑定长按事件
      });
      $("#page-2").live('taphole', function() {
        $('#toHome').click(); // 为另一页面绑定长按事件
      });
    });

swipe(滑动) ：随便左右滑动

$(function(){
      $("#home").live('swipe', function() {
        $('#toPage2').click(); // 为首页绑定滑动事件
      });
      $("#page-2").live('swipe', function() {
        $('#toHome').click(); // 为另一页面绑定滑动事件
      });
    });

游可

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryMobile的(十八) 触摸事件(touch)

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

扫一扫

专栏目录