자바스크립트 모니터링 마우스 휠 이벤트_자바스크립트 기술에 대한 간략한 분석-JS 튜토리얼-php.cn

자바스크립트 모니터링 마우스 휠 이벤트_자바스크립트 기술에 대한 간략한 분석

WBOY

풀어 주다： 2016-05-16 16:46:16

원래의

1590명이 탐색했습니다.

우리 모두는 마우스 휠을 사용하여 양식의 숫자를 늘리거나 줄이거나, 마우스 휠을 사용하여 버튼의 왼쪽 및 오른쪽, 위쪽 및 아래쪽 스크롤을 제어하는 것을 보았습니다. 이는 모두 마우스 휠의 js 이벤트 모니터링을 통해 구현됩니다. 오늘 여기서 소개하는 것은 마우스 휠 이벤트에 대한 간단한 JS 모니터링입니다.

브라우저마다 다른 이벤트

우선, 브라우저마다 스크롤 휠 이벤트가 다릅니다. 주로 onmousewheel(firefox에서는 지원되지 않음)과 DOMMouseScroll(firefox에서만 지원됨)의 두 가지 유형이 있습니다. 여기서는 이 두 가지 이벤트에 대해 자세히 설명하지 않겠습니다. 더 알고 싶은 친구는 mousewheel(마우스휠) 및 DOMMouseScroll 이벤트.
또한 작업 중에 이벤트 청취를 추가해야 합니다. 코드는 다음과 같습니다. Firefox와 호환되며 addEventListener를 사용하여 모니터링합니다

코드 복사 코드는 다음과 같습니다.

/*이벤트 등록*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false) ;
}//W3C
window .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js는 스크롤 휠의 위아래를 판단하기 위해 숫자 값을 반환합니다

스크롤 휠이 위인지 아래인지 판단할 때 브라우저에서의 호환성도 고려해야 합니다. 현재 5개 주요 브라우저(IE, Opera, Safari, Firefox, Chrome) 중 Firefox는 디테일을 사용하고 있으며, 나머지 4개는 세부 정보를 사용합니다. 두 유형 모두 휠델타(wheelDelta)만 사용합니다. 이는 의미가 일관됨을 의미합니다. 디테일과 휠델타는 각각 2개의 값만 취하고, 디테일은 ±3만 취하고, 휠델타는 ±120만 취합니다. 양수는 위쪽을 나타내고 음수는 아래쪽을 나타냅니다.
구체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< label for="wheelDelta">스크롤 값:(IE/Opera)
스크롤 값: (Firefox)

위 코드를 실행하면 다음을 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Firefox가 아닌 브라우저에서는 스크롤 휠 위로 스크롤하면 값이 120이고 아래로 스크롤하면 -120이 반환됩니다

. Firefox 브라우저에서 휠을 위로 스크롤하면 -3 값이 반환되고, 아래로 스크롤하면 3이 반환됩니다
코드 부분은 다음과 같습니다. .wheelDelta는 Firefox 브라우저가 아닌지 확인하는 데 사용됩니다. e.detail은 Firefox 브라우저입니다. 
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail) {//Firefox
t2.value=e.detail;
}