AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Обработка события колесика мыши

Есть 2 события, реагирующие на скролл колесом 'DOMMouseScroll' (Firefox) и 'mousewheel' (остальные)

Здесь будет показываться результат выполнения обработчика колесика мыши
Исходный код этого примера:

<div class="res" id='res'>Здесь будет показываться результат выполнения обработчика колесика мыши
</div>
<script type="text/javascript">
function wheel(event){
    var delta = 0;
    if (!event) event = window.event; // Событие IE.
    // Установим кроссбраузерную delta
    if (event.wheelDelta) {
        // IE, Opera, safari, chrome - кратность дельта равна 120
        delta = event.wheelDelta/120;
    } else if (event.detail) {
        // Mozilla, кратность дельта равна 3
        delta = -event.detail/3;
    }
    if (delta) {
        // Отменим текущее событие - событие поумолчанию (скролинг окна).
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.returnValue = false; // для IE

        // если дельта больше 0, то колесо крутят вверх, иначе вниз
        var dir = delta > 0 ? 'Up' : 'Down';
        document.getElementById('res').innerHTML=dir+' '+Math.abs(delta);
    }
}

addEvent(window, 'mousewheel', wheel);
addEvent(window, 'DOMMouseScroll', wheel);
</script>

Кросбраузерная Функция addEvent описана здесь.


.

© Copyright 2008-2016 by KDG