📌  相关文章
📜  jQuery Mobile vmousemove 事件(1)

📅  最后修改于: 2023-12-03 15:02:10.912000             🧑  作者: Mango

jQuery Mobile vmousemove 事件

简介

vmousemove 事件是 jQuery Mobile 提供的移动设备事件之一，用于响应用户在移动设备上进行的手势操作中的移动动作（与移动端相应的 mousemove 事件）。

使用方法
绑定事件

在 jQuery Mobile 中，通过 on 方法绑定 vmousemove 事件：

$(document).on("vmousemove", function(event) {
  // 执行相关操作
});
解绑事件

通过 off 方法解绑 vmousemove 事件：

$(document).off("vmousemove");
示例

以下示例为类似 PC 端鼠标拖动效果的实现：

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
    #dragDiv {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="dragDiv"></div>
  <script>
    $(document).on("pagecreate", function() {
      var startX, startY, moveEndX, moveEndY, X, Y;
      var dragDiv = $("#dragDiv");

      dragDiv.on("vmousedown", function(e) {
        startX = e.pageX - parseInt(dragDiv.css("left"));
        startY = e.pageY - parseInt(dragDiv.css("top"));
        $(this).addClass("dragging");
      });

      $(document).on("vmousemove", function(e) {
        if (dragDiv.hasClass("dragging")) {
          moveEndX = e.pageX - startX;
          moveEndY = e.pageY - startY;
          X = moveEndX + "px";
          Y = moveEndY + "px";
          dragDiv.css("left", X);
          dragDiv.css("top", Y);
        }
      });

      $(document).on("vmouseup", function(e) {
        dragDiv.removeClass("dragging");
      });
    });
  </script>
</body>

</html>
注意点

在移动端上，经常会遇到 touchstart 和 touchmove 之间断续的问题。为了解决该问题，jQuery Mobile 定义了 vclick、vmouseover、vmousemove、vmouseout 等事件，具体可参考官方文档。

总结

vmousemove 事件是 jQuery Mobile 提供的响应移动设备手势操作中的移动动作的事件。可以通过 on 方法绑定事件，off 方法解绑事件。在移动端上注意 touchstart 和 touchmove 之间断续的问题，可采用 jQuery Mobile 定义的相关事件进行操作。