> 웹 프론트엔드 > JS 튜토리얼 > js(firefox 멀티브라우저)_javascript 기술의 마우스 휠 이벤트에 대한 자세한 설명

js(firefox 멀티브라우저)_javascript 기술의 마우스 휠 이벤트에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 18:35:29
원래의
1021명이 탐색했습니다.

첨부된 이벤트

테스트 결과, IE/Opera는 동일한 유형이며, AttachEvent를 사용하여 휠 이벤트를 추가할 수 있습니다.

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

/*IE 등록 이벤트*/
if( document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}

Firefox는 addEventListener를 사용하여 스크롤 휠 이벤트를 추가합니다
코드 복사 코드는 다음과 같습니다.

/*Firefox 등록 이벤트*/
if(document.addEventListener) {
document.addEventListener( 'DOMMouseScroll',scrollFunc,false);
}

Safari와 Chrome은 동일한 유형이며 HTML DOM을 사용하여 이벤트를 추가할 수 있습니다.
window.onmousewheel=document.onmousewheel=scrollFunc;/ /IE/Opera/Chrome
Firefox를 제외한 나머지는 모두 HTML DOM을 사용하여 이벤트를 추가할 수 있으므로 다음 방법으로 이벤트를 추가하세요
코드 복사 코드는 다음과 같습니다.

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

세부정보 및 휠Delta

스크롤 휠이 위인지 아래인지 판단합니다. 브라우저에서도 호환성을 고려해야 합니다. 5가지 주요 브라우저(IE, Opera, Safari, Firefox, Chrome) 중 Firefox는 세부 정보를 사용하고 나머지 4개는 세부 정보를 사용합니다. 휠델타(wheelDelta)를 사용하면 값이 일치하지 않습니다. 이는 의미가 동일하다는 것을 의미합니다. 디테일과 휠델타는 각각 두 개의 값만 취하고 디테일은 ±3만 취하고 휠델타는 ±120만 취합니다. 여기서 양수는 위쪽과 음수를 나타냅니다. 숫자는 아래쪽을 나타냅니다.
코드 복사 코드는 다음과 같습니다.

(IE/Opera)








관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿