[제이쿼리(jQuery) UI] 마우스휠이벤트 1. 마우스 휠 이벤트 를 알아보자.

마크업 부터 시작하는 UI/마우스 휠 사용한 UI 2015. 9. 20. 22:57

728x90
반응형

마우스 휠을 이용하여 이벤트를 만들어 봅시다.

이 장에서는 마우스 휠에 대한 이론을 살펴 보도록 합시다.


예제용 UI를 찾아보려고 했는데 도통 간단한게 없어서 일단 예를 보여드리도록 하겠습니다.



마우스 휠을 아랫방향으로 했을 때에는 -120

마우스 휠을 윗 방향으로 했을 때에는 120 이라는 숫자가 뜨죠?


이해를 돕기 위해 js 피들의 javascript 탭에 주석으로 달아 놓긴 했지만

다시한번 글을 적어보도록 하겠습니다.


일단 제가 설치한 브라우저는

크롬(Chrome), 익스(IE), 파이어폭스(Firefox) 기준으로 말씀드리겠습니다.


다른 브라우저는 테스트 해보진 않았지만 아마도(죄송합니다.. ㅠㅠ)

익스, 크롬, 사파리, 오페라 의 경우엔

mousewheel 이라는 이벤트를 사용할 수 있고


파이어폭스 의 경우엔

DOMMouseScroll 이라는 이벤트를 사용할 수 있습니다.


즉... 파이어 폭스는 mousewheel 이라는 이벤트가 없기 때문에

mousewheel 과 DOMMouseScroll 이벤트 두개를 동시에 걸어주는 메서드인 .on() 를 사용해야 합니다.




스크린샷을 찍어보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll'function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
cs


일단 저의 마크업은 이렇습니다.

이 마크업을 보시면 13번 라인에 콘솔창으로 E 를 찍어보게 됩니다.

크롬에서 E 에 담긴걸 찍어보도록 하겠습니다.

여기서 function()의 괄호 안에 있는 e 는 mousewheel 입니다!



WheelEvent {}

이라는 게 뜨죠? 정확히 13번 라인입니다.

이걸 펼쳐보면... wheelDelta 라는 속성이 있습니다.



저 값이

마우스 휠을 '내리게' 되면 -120 을 출력하고

마우스 휠을 '올리게' 되면 120 을 출력합니다.


익스도 마찬가지로 크롬과 동일하게

e.originalEvent 의 속성으로 wheelDelta 속성을 사용합니다.



그렇죠?


하지만!


파이어폭스는

e.originalEvent <- 여기서의 e 는 DOMMouseScroll 이벤트 겠죠!




파이어폭스 에서도 똑같이 위와같은 마크업의 13번째 라인이 콘솔창에 출력 되었습니다.

저 DOMMouseScroll 을 클릭해 보면



detail 이라는 속성이 들어있습니다.

저 detail 속성은 파이어폭스에서만 사용할수 있는

e.originalEvent 의 속성 입니다.


하지만...

크롬도 익스도 120을 출력하는데

얘만 3 출력하게 놔둔다면

조건문을 이용한 UI를 만들때 불편하겠죠???


그래서 -40을 곱하기 해주는 겁니다.

파이어 폭스는 마우스를 휠을 올릴경우 음수값을

마우스 휠을 내릴경우 양수값을 출력합니다.



/* -- 180802 추가 -- */

노트북 에선 마우스 내릴 때 -150 올릴때 150 으로 표시되는 경우가 있습니다.

그래서 마우스 휠 이벤트 2장의 내용을 수정했습니다.

http://recoveryman.tistory.com/121

반응형