Tap 이벤트 분석 및 Tap 포인트 스루 원리
- 不言원래의
- 2018-07-28 10:48:512153검색
이 글의 내용은 탭 사건 분석과 탭 포인트 쓰루 원리에 관한 내용으로 좋은 참고가치가 있어 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.
먼저 탭 이벤트를 소개합니다:
탭 이벤트의 의미: 모바일 측에서 클릭 이벤트는 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 포인트 스루 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!