집 > 기사 > 웹 프론트엔드 > Tap 이벤트 분석 및 Tap 포인트 스루 원리

Tap 이벤트 분석 및 Tap 포인트 스루 원리

不言원래의: 2018-07-28 10:48:512134검색

이 글의 내용은 탭 사건 분석과 탭 포인트 쓰루 원리에 관한 내용으로 좋은 참고가치가 있어 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.

먼저 탭 이벤트를 소개합니다:

탭 이벤트의 의미: 모바일 측에서 클릭 이벤트는 300ms의 지연을 갖습니다. 300ms. (즉, 더블클릭하여 웹페이지를 확대하는 효과는 300ms의 판단시간이 있습니다. 300ms가 지나면 클릭 이벤트가 발생합니다.)
탭 이벤트 구현: 브라우저에서 지원하는 터치 이벤트를 사용합니다. 기본적으로 touchstart, touchmove에 따라 시뮬레이션합니다. 이 세 가지 touchend 이벤트는 탭 이벤트를 시뮬레이션하여 탭 이벤트 캡슐화 효과를 얻습니다. 아래 코드는 제가 만든 간단한 캡슐화입니다.

//定义tap函数，传入需要绑定的元素，和一个回调函数
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //开始触摸的事件  
        startX = e.touches[0].clientX; //手指在浏览器横坐标
        startY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在浏览器横坐标
        endY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap
               console.log('超时了');
            return ; 
        }
        //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});

정리하자면 탭 이벤트의 순서는 touchstart -> touchmove -> touchend -> touchend에서 콜백 실행

탭 탭의 원리:

이러한 응용 시나리오는 다음과 같습니다. 공통. 마스크 레이어를 클릭하면 마스크 레이어가 사라지고 하단에 페이지가 나타납니다. 하단 페이지의 요소가 클릭 이벤트에 바인딩되어 있을 때 마스크를 클릭하면 해당 요소의 위치를 정확히 클릭하면 해당 요소의 클릭 이벤트가 발생하는 것을 확인할 수 있습니다.
click은 PC 측에서 mousedown -> mousemove -> mouseup -> 클릭 순서로 실행되며, 모바일 측에서는 touchstart -> touchend; 순차적으로 실행됩니다. 터치엔드 시 마스크가 사라졌기 때문에 하단 페이지의 요소를 클릭하는 것과 같습니다. 따라서 하단 요소가 클릭 이벤트를 트리거합니다.

탭 클릭 솔루션:

탭 이벤트 또는 클릭 이벤트를 균일하게 사용하세요.
마스크 레이어 사라지는 시간을 300ms 이상으로 지연
투명 마스크를 사용하여 차단하세요(권장하지 않음, 너무 멍청하고 귀찮음)
fastclick 라이브러리 사용

Tap 이벤트 분석 및 Tap 포인트 스루 원리

관련 기사