---

jQuery Mobile 触摸事件技术文档

前言

jQuery Mobile 是针对移动端 Web 应用开发的 jQuery 插件。它通过面向 iOS、Android、Windows Phone 等各种平台的大量测试工作，使得开发人员可以快速地搭建起一个属于移动端的Web应用。jQuery Mobile提供了一套完整的触摸事件支持，为移动端web应用提供了更高的交互体验。

触摸事件

jQuery Mobile 提供的触摸事件有以下几种：

tap

tap 事件为轻击事件，当手指按下并松开的时间在一秒钟以内且位移距离不超过10像素时触发。

$(selector).on("tap",function(){
  //处理代码
});

taphold

taphold 事件为长按事件，当手指按下并超过750毫秒时触发。

$(selector).on("taphold",function(){
  //处理代码
});

swipe

swipe 事件为滑动事件，当手指按下并移动一定距离后松开时触发。

$(selector).on("swipe",function(){
  //处理代码
});

swipeleft

swipeleft 事件为向左滑动事件，当手指按下并向左移动一定距离后松开时触发。

$(selector).on("swipeleft",function(){
  //处理代码
});

swiperight

swiperight 事件为向右滑动事件，当手指按下并向右移动一定距离后松开时触发。

$(selector).on("swiperight",function(){
  //处理代码
});

vmouseover

vmouseover 事件为触摸移入事件，当手指没有离开屏幕并移动到某个元素上时触发。

$(selector).on("vmouseover",function(){
  //处理代码
});

vmouseout

vmouseout 事件为触摸移出事件，当手指在某个元素上移动并离开屏幕时触发。

$(selector).on("vmouseout",function(){
  //处理代码
});

事件对象

在触摸事件处理函数中，可以使用事件对象来获取有关触摸事件的信息。

事件对象包含以下几个属性：

• type：事件类型
• target：事件对象
• pageX：触摸点在页面中的横坐标值
• pageY：触摸点在页面中的纵坐标值
• touches：一个触摸点列表，每个触摸点都是一个对象，包含了有关该触摸点的信息。例如，touches[0].pageX 表示第一个触摸点在页面中的横坐标值。
• preventDefault()：阻止默认事件

示例

接下来我们演示几个触摸事件的应用场景

拖动图片

<img src="image.png" id="dragImage">

<script>
  var x, y;
  $("#dragImage").on("vmousedown", function(e) {
      x = e.pageX - parseInt($(this).css("left"));
      y = e.pageY - parseInt($(this).css("top"));
      $(document).on("vmousemove", function(e) {
          $("#dragImage").css({
              "left": (e.pageX - x) + "px",
              "top": (e.pageY - y) + "px"
          });
      });
  }).on("vmouseup", function() {
      $(document).off("vmousemove");
  });
</script>

菜单滑动展开

<div id="menu-container">
  <a href="#" id="menu-link" class="closed">菜单</a>
  <ul id="menu">
    <li><a href="#">选项一</a></li>
    <li><a href="#">选项二</a></li>
    <li><a href="#">选项三</a></li>
  </ul>
</div>

<style>
#menu-container {
  position: relative;
  padding-top: 40px;
}
#menu-link {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  background: #333;
  color: #fff;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 1rem;
  text-decoration: none;
}
#menu {
  position: absolute;
  top: 0;
  right: -200px;
  background: #f2f2f2;
  border: 1px solid #ccc;
  width: 200px;
  height: 100%;
  z-index: 998;
  list-style: none;
  padding: 10px;
  margin: 0;
  transition: right 0.3s ease-out;
}
#menu.open {
  right: 0;
}

@media (min-width: 768px) {
  #menu {
    width: 300px;
  }
}
</style>

<script>
$("#menu-link").on("click", function(e) {
    e.preventDefault();
    $("#menu").toggleClass("open");
});
$("body").on("vmousedown", function(e) {
    if ($("#menu").hasClass("open")) {
        if (!$(e.target).closest("#menu-container").length) {
            e.preventDefault();
            $("#menu").removeClass("open");
        }
    }
});
</script>

结论

jQuery Mobile 提供了一套完整的触摸事件支持，能够很好地满足移动端web应用开发的需求，并且方便易用、兼容性强。在实际开发中，可以根据需求选择适当的触摸事件来实现更加优秀的交互效果。