前端demo: jquery版本兼容性获取e.touches

最新推荐文章于 2024-03-12 15:13:28 发布

Bee.Bee.

最新推荐文章于 2024-03-12 15:13:28 发布

阅读量99

点赞数

分类专栏：前端demo 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/weixin_49015558/article/details/130622904

版权

前端demo 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>scaleDemo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

        <!--    jQuery版本兼容性 -->
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

        <!--    wap端调试工具 -->
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
        <script>
            var vConsole = new window.VConsole(); // VConsole 默认会挂载到 `window.VConsole` 上
        </script>
        <style>
            #img_wrapper {
              height: 500px;
              width: 500px;
              background: red;
            }
        </style>
    </head>
    <body>
        <div id="img_wrapper"></div>
        <script>
            var isDoubleTouch = false; //是否为多触点
            var start = []; //存放触点坐标
            $("#img_wrapper")
              .off("touchstart touchmove touchend")
              .on({
                touchstart: function (e) {
                  e.stopPropagation();
                  // jquery3.6.4 能够获取e.touches ;jquery1.12.0 不能获取e.touches
                  let touches = e.touches || getTouches(e);
                  if (touches && touches.length >= 2) {
                    //判断是否有两个点在屏幕上
                    isDoubleTouch = true;
                    start = touches; //获得第一组两个点
                  }
                },
                touchmove: function (e) {
                  let touches = e.touches || getTouches(e);
                  if (touches && touches.length >= 2 && isDoubleTouch) {
                    //手势事件
                    let now = touches; //获得第二组两个点
                    var scale =
                      getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //获得缩放比例
                    scale > 1 ? plus() : minus();
                  }
                },
                touchend: function () {
                  if (isDoubleTouch) {
                    isDoubleTouch = false;
                  }
                },
              });

            /* 两点的距离 */
            function getDistance(p1, p2) {
              var x = p2.pageX - p1.pageX,
                y = p2.pageY - p1.pageY;
              return Math.sqrt(x * x + y * y);
            }

            function plus() {
              console.log("放大了");
            }

            function minus() {
              console.log("缩小了");
            }

            /* 处理jquery1.12.0 获取不到e.touches */
            function getTouches(event) {
              let touches = [];
              for (const [key, value] of Object.entries(
                event.originalEvent.touches
              )) {
                touches.push({
                  pageX: value.pageX,
                  pageY: value.pageY,
                });
              }
              return touches;
            }
        </script>
    </body>
</html>