标签：box function 元素 js touch 事件 var 移动

一, 移动端事件

touchstart:开始事件 手指头触摸屏幕触发的事件

touchmove:手指触摸到DOM元素，开始移动触发的事件

touchend:手指离开触摸元素触发的事件

// 使用监听的方式给移动端元素添加事件

// 按下事件  点击事件
box.addEventListener('touchstart', function () {
    console.log('我摸着他了');
})

// 移动事件  选中元素，移动的过程当中 时时触发
box.addEventListener('touchmove',function(){
    console.log('我继续摸');
})

// 离开事件
box.addEventListener('touchend',function(){
    console.log('轻轻我走了');
})

移动端事件和pc端事件

touchstart:移动端的开始（点击事件）

onclick:pc端的点击事件

pc端的事件在移动端使用，因为移动端的网页有缩放的功能，所以，在使用pc端的点击事件的时候，会先去判断当前的点击事件，是缩放还是点击，所有，有300ms的延迟

1, 解决300ms延迟问题

1、当手指触摸dom元素的时候，记录下当前触摸的时间 （2020-10-15-9：30）

2、判断是不是有移动元素的行为事件发生 （开关）

3、手指离开元素的时候，同样把离开的时间进行记录 （2020-10-15-9：35）

4、使用离开的时间 - 开始的时间 < 150ms 说明是点击，不是移动

var box = document.querySelector('#box');

function tab(obj, callback) { // obj :元素  callback:回调函数
    var startTime = 0; // 开始时间
    var isMove = false; // 开关，如果值为true说明有移动事件  

    // 给元素绑定事件
    // 手指触摸元素记录的时间
    obj.addEventListener('touchstart', function () {
        startTime = Date.now();
    })
    // 移动事件
    obj.addEventListener('touchmove', function () {
        isMove = true;
    })
    // 离开事件
    obj.addEventListener('touchend', function () {
        if (!isMove && Date.now() - startTime < 150) {
            callback && callback();
        }
        startTime = 0;
        isMove = false;
    })
}

// 调用
tab(box, function () {
    console.log(1);
})

tab(box, function () {
    console.log(2);
})

2, 点透问题

var div1 = document.querySelector('#div1'); // 上
var div2 = document.querySelector('#div2'); // 下

div1.addEventListener('touchstart',function(e){
    var tar = e.target;
    if(tar.id === 'div1'){
        div1.style.display = 'none';
        e.preventDefault(); 
    }

})

3, 发生的场景

1、div2下面的标签元素，默认有点击的行为（超链接 表单）

2、div1当做遮罩，罩住的是div2 ,但是，当给div1添加点击事件的时候，div1可以消失（非常重要）

3、div1和div2在z轴叠加

4, 解决方案：

​ 1、别消失

​ 2、下面的标签元素没有默认的点击事件

​ 3、阻止默认行为

二, 移动端事件对象

box.addEventListener('touchstart',function(e){
    console.log(e);
})

1, 拖动元素

// 1、记录手指的起始位置 
// 2、移动元素之前，获取到元素距离左边的距离
// 3、移动元素之后，记录手指离开的位置  
// 4、用 第三部获取的值  - 第一步获取的值 + 第二部获取的值  

var box = document.querySelector('#box');

// 记录手指移动的距离值 
var startX = 0;
var startY = 0;

// 盒子距离左边的值
var x = 0;
var y = 0;

// 绑定事件
box.addEventListener('touchstart', function (e) {

    // 盒子的值
    x = this.offsetLeft;
    y = this.offsetTop;

    // 手指的初始值
    startX = e.targetTouches[0].clientX;
    startY = e.targetTouches[0].clientY;
})

box.addEventListener('touchmove', function (e) {

    var left = e.targetTouches[0].clientX - startX + x;
    var top = e.targetTouches[0].clientY - startY + y;

    box.style.left = left + 'px';
    box.style.top = top + 'px';

    e.preventDefault();
})

2, touch.js

是由百度开发维护的，针对于移动的点击事件开发，现在已经停止开发维护了

下载touch.js

下载链接：https://www.bootcdn.cn/touchjs/

Touch.js官网： https://www.awesomes.cn/repo/Clouda-team/touchjs
github：https://github.com/Clouda-team/touchjs
加载CND库：<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>
官方API：http://cloudajs.org/docs/step4_API_Documentation#h2_7

3, 绑定事件

touch.on(元素，事件名称，函数)

// touch.on(元素，事件名称，函数)  
// 注意：事件方式可以同时添加多种

// tap:单击事件

touch.on('#box','tap',function(){
    console.log(1);
})

touch.on('#box','tap hold doubletap',function(){
    console.log(1);
})

4, 事件代理

// 事件代理
// touch.on(父元素，事件，子元素，函数)
touch.on('ul','tap','li',function(){
    this.style.background = 'red';
})

5, 部分手势事件

缩放

pinchstart：缩放手势起点

pinchend：缩放手势终点

pinch：缩放手势

pinchin：收缩

pinchout：放大

旋转

rotateleft向左旋转

rotateright向右旋转

rotate旋转

滑动

swipestart滑动手势起点

swiping滑动中

swipeend滑动手势终点

swipeleft向左滑动

swiperight向右滑动

swipeup向上滑动

swipedown向下滑动

swipe滑动

拖动

拖动开始 dragstart拖动屏幕

拖动 drag拖动手势

拖动结束 dragend拖动屏幕

长按

hold 长按屏幕

敲击

tap单击屏幕

doubletap双击屏幕

图片拖动

// 计算图片左边的距离 = 可视区域的宽度 - 图片本身的宽度 - 图片距离左边的距离

var box = document.querySelector('#box');
var target = document.querySelector('#target');
// 动画
target.style.transition = 'all ease 0.5s';
// 计算值
var boxW = box.offsetWidth;
var lt = target.offsetLeft;
var rt = boxW - lt - 300;

touch.on('#target', 'touchstart', function (e) {
    // 阻止默认行为
    e.preventDefault();
})

// 往右滑动
touch.on('#target', 'swiperight', function () {
    this.style.transform = 'translate3d(' + rt + 'px,0,0)';
})

// 往左滑动
touch.on('#target', 'swipeleft', function () {
    this.style.transform = 'translate3d(-' + this.offsetLeft + 'px,0,0)'
})

标签：box,function,元素,js,touch,事件,var,移动
来源： https://www.cnblogs.com/bnzw/p/13861952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。