专栏首页h5学习笔记移动端触屏事件

移动端触屏事件

1. 触屏事件概述

移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

常见的触屏事件如下:

2. 触摸事件对象(TouchEvent)

TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象重点我们看三个常见对象列表:

<script>
//触摸事件对象
// 1.获取元素
// 2.手指触摸DOM元素事件
    var div = document.querySelector('div' );
    div.addEventL istener( 'touchstart', function(e) {
        console.1og(e);
    // touches正在触摸屏幕的所有手指的列表
    // targetTouches 正在触摸当前DOM元素的手指列表
        console.1og(e.targetTouches[0]);
    //targetTouches[0]就可以得到正在触摸dom元素的第一个手指的相关信息比如手指的坐标等等
    });
    // 3.手指在DOM元素身上移动事件
    div.addEventListener( 'touchmove', function() {
    });
    // 4.手指离开DOM元素事件
    div.addEventListener( 'touchend', function() {
    });
    //当我们手指离开屏幕的时候,就没有了touches 和targetTouches 列表
    //但是会有changedTouches
</script>

因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes

3.案例:移动端拖动元素

  1. touchstart、touchmove、touchend可以实现拖动元素
  2. 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY
  3. 移动端拖动的原理:    手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
  4. 手指移动的距离:  手指滑动中的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置 (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
<script>
        // 获取元素
        var div = document.querySelector('div');
        var startX = 0; //手指初始坐标
        var startY = 0;
        var x = 0; //元素初始位置
        var y = 0;
        div.addEventListener('touchstart', function (e) {
            // 获取手指开始位置
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            // 获取元素开始位置
            x = div.offsetLeft;
            y = div.offsetTop;
        });
        div.addEventListener('touchmove', function (e) {
            // 计算手指移动距离  手指移动之后的坐标减去初始坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 元素移动距离 元素初始坐标加上手指移动距离
            div.style.left = x + moveX + 'px';
            div.style.top = y + moveY + 'px';
            e.preventDefault(); //阻止屏幕滚动的默认行为
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery 尺寸、位置操作

    jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。

    星辰_大海
  • DOM的核心总结

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言

    星辰_大海
  • 事件基础及操作元素

    JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。

    星辰_大海
  • 两个CSS知识点:BFC和选择器权重

    BFC 全称 Block Formatting Context,翻译过来就是块格式化上下文,它是 CSS 规范的一部分。

    多云转晴
  • Jquery基本用法总结

    选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

    欢醉
  • 这些 CSS 伪类,你可能还不知道,可以用起来了!

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它...

    前端小智@大迁世界
  • 当 Vue 处理数组与处理纯对象的方式一样

    当给数组设置 length 时,如果大于数组本身长度,新元素则会以 empty 填充,如下所示:

    三毛
  • 【前端】:浏览器渲染模式

    在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator准备的版本以及为微软(Microsoft)的 Internet Expl...

    WEBJ2EE
  • 什么是洗牌算法

    小E最近在设计一款斗地主小游戏,为了保证发到玩家手中的牌具有随机性,小E必须对现实世界中的洗牌过程进行模拟。看似简单的一个问题,却难住了小E。

    帅地
  • 你不知道的css(二) ----content与替换元素,margin,padding

    触发margin:auto的前提条件是对应方向会自动填充,所以一般高度不会自适应,可以使用writing-mode: vertical-lr改变文档流方向,而这...

    2014v

扫码关注云+社区

领取腾讯云代金券