집 >웹 프론트엔드 >JS 튜토리얼 >클릭 이벤트 및 js에서 자주 사용되는 이벤트 개요(PC 및 모바일)

클릭 이벤트 및 js에서 자주 사용되는 이벤트 개요(PC 및 모바일)

php是最好的语言원래의: 2018-08-07 10:10:315239검색

1. 클릭 이벤트:

PC 측에서는 클릭 이벤트이지만, 모바일 프로젝트에서는 클릭이 하는 일과 더블 클릭이 하는 일을 구분하는 경우가 많습니다. 이므로 모바일 브라우저에서는 클릭 식별 시 클릭으로 확인된 후에만 실행됩니다. 모바일 단말에서 클릭 사용 시 300ms의 지연이 발생합니다. 첫 번째 클릭이 완료된 후 브라우저는 기다려야 합니다. 두 번째 클릭이 트리거되는지 확인하는 데 300ms가 소요됩니다. 두 번째 클릭이 트리거되면 클릭에 속하지 않습니다. 그러나 일부 시나리오에서는 필요합니다. 지연을 취소하려면:

(1) 스틸 확대/축소: 이 방법을 완전히 사용해야 합니다. 목표를 달성하려면 크기 조정을 비활성화해야 합니다. 대부분의 모바일 단말기는 이 지연 문제를 해결할 수 있지만 일부 Apple 휴대폰에서는 여전히 그렇게 할 수 없습니다.

너비 - 뷰포트의 너비. ; height - 뷰포트의 높이;initial-scale - 초기 크기 조정 비율;minimum-scale - 사용자가 확대/축소할 수 있는 최소 비율; maximum-scale - 사용자가 확대/축소할 수 있는 최대 비율 user-scalable - 사용자가 수동으로 확대/축소할 수 있는지 여부

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

(2) fastclick.js: FastClick은 모바일 브라우징 문제를 해결하기 위해 특별히 설계된 FT Labs입니다. 300밀리초 클릭 지연 문제를 해결하기 위해 개발된 경량 라이브러리입니다. 즉, FastClick이 터치엔드 이벤트를 감지하면 DOM 사용자 정의 이벤트를 통해 즉시 시뮬레이션된 클릭 이벤트를 트리거하고 300밀리초 후에 브라우저에서 실제로 트리거되는 클릭 이벤트를 차단합니다. js 파일.

2단계: js 파일에 다음 코드를 추가합니다. 창 로드 이벤트 후 본문에서 FastClick.attach()를 호출합니다.

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

프로젝트에서 JQuery를 사용하는 경우 위 코드를 다음과 같이 다시 작성하세요.

$(function() {    
    FastClick.attach(document.body);    
});

모바일 측의 클릭 이벤트 교체:

(1) 터치스타트 사용: 터치 이벤트에는 터치스타트, 터치엔드, 터치무브 등이 포함됩니다. 간단히 사용하세요. touchstart를 사용하여 클릭을 대체할 수 있지만 문제는 동일한 객체에 대한 클릭 이벤트와 슬라이딩 이벤트를 바인딩하려는 경우 손가락이 요소를 클릭할 때 모바일 측에서 충돌이 발생한다는 것입니다. 진행 내용: touchstart -- > touchmove -> touchend -->click

touch 이벤트 모델:

이벤트 이름

기능터치스타트화면을 손가락으로 누르세요터치무브화면을 손가락으로 스와이프하세요터치엔드화면에서 손가락을 떼세요터치캔클특수 상황에서 폐점/퇴장 시 발생





	터치 이벤트 속성:

속성 이름

기능종류이벤트 종류target이벤트 소스preventDefault(returnValue)기본 동작 차단전파 중지(cancleBubble)사건 확산을 막아주세요touches[0].clientX터치 위치의 x 값changedTouches현재 가치와 남은 가치

(2) 탭 이벤트: 표준 이벤트에는 탭 이벤트가 없습니다. 탭 이벤트는 터치를 사용하여 zepto와 같은 일부 라이브러리에 의해 캡슐화되며 터치시작 및 터치엔드에서 시간과 손가락 위치가 기록되고 터치엔드에서 비교됩니다. 손가락 위치가 동일하고 시간 간격이 짧은 경우 프로세스 중에 touchmove 이벤트가 트리거되지 않으면 콜백 함수가 호출되며 300ms 후에도 클릭 이벤트가 생성되지만 모니터링은 이루어지지 않습니다. 1) 페이지에 모달 상자가 나타납니다. 모달 상자에 버튼이 있고(모달 상자 닫기) 버튼 바로 아래에 입력 상자가 있습니다. 2) 모달 상자의 닫기 버튼을 클릭하면 모달 상자가 즉시 사라지지만 300ms 후에 클릭 이벤트가 발생하고 입력 상자가 클릭 이벤트를 수신하므로 입력 상자가 초점이 맞춰집니다

PC에서 일반적으로 사용되는 이벤트:

이벤트 이름	기능
클릭	마우스를 클릭하면 실행됩니다
mouseover	마우스 포인터가 요소 위로 움직일 때 실행됩니다
mouseout	마우스 포인터가 요소 밖으로 이동할 때 실행됩니다
mouseenter	마우스 포인터가 요소 위로 이동할 때 트리거됩니다(버블은 지원되지 않음)
mouseleave	마우스 포인터가 요소 밖으로 이동할 때 트리거됩니다(버블링은 지원되지 않음)
mousemove	마우스 포인터가 요소 위로 움직일 때 실행됩니다
mousedown	요소에서 마우스 버튼을 누르면 실행됩니다
mouseup	요소에서 마우스 버튼을 놓으면 실행됩니다
마우스휠	마우스 휠을 스크롤할 때 실행되는 스크립트
keydown	사용자가 키를 누르면 실행
keyup	사용자가 키를 놓으면 실행됩니다
로드	페이지 로딩이 완료된 후 트리거됨
스크롤	요소 스크롤바가 스크롤될 때 실행되는 스크립트
흐릿하게	요소가 포커스를 잃을 때 실행되는 스크립트
집중	요소에 포커스가 있을 때 실행되는 스크립트
변화	요소 값이 변경될 때 실행되는 스크립트

모바일 단말기에서 일반적으로 사용되는 이벤트:

이벤트 이름	기능
클릭	클릭하면 실행됩니다(클릭)
로드	페이지 로딩이 완료된 후 트리거됨
스크롤	요소 스크롤바가 스크롤될 때 실행되는 스크립트
흐릿하게	요소가 포커스를 잃을 때 실행되는 스크립트
집중	요소에 포커스가 있을 때 실행되는 스크립트
변화	요소 값이 변경될 때 실행되는 스크립트
입력	키업과 키다운을 대체합니다
터치 이벤트 모델	한 손가락 작업 처리
제스처 이벤트 모델	여러 손가락 작업 처리

클릭 이벤트 및 js에서 자주 사용되는 이벤트 개요(PC 및 모바일)

관련 기사