Javascript: захватить событие колеса мыши и не прокручивать страницу?

Я пытаюсь предотвратить событие mousewheel, захваченное элементом страницы, чтобы вызвать прокрутку.

Я ожидал, что "false" в качестве последнего параметра будет иметь ожидаемый результат, но использование колеса мыши над этим элементом "canvas" все еще вызывает прокрутку:

this.canvas.addEventListener('mousewheel',function(event){mouseController.wheel(event)}, false);

Вне этого элемента "холст" прокрутка должна произойти. Внутри он должен запускать только метод .wheel(). Что я делаю неправильно?

Спасибо! J.

Ответ 1

Вы можете сделать это, вернув false в конец вашего обработчика.

this.canvas.addEventListener('mousewheel',function(event){
    mouseController.wheel(event);
    return false; 
}, false);

Ответ 2

Вы пробовали event.preventDefault()?

this.canvas.addEventListener('mousewheel',function(event){
    mouseController.wheel(event);
    event.preventDefault();
}, false);

Ответ 3

Просто добавив, я знаю, что холст - это только HTML5, поэтому это не нужно, но на всякий случай кому-то нужна совместимость с crossbrowser/oldbrowser, используйте это:

/* To attach the event: */
addEvent(el, ev, func) {
    if (el.addEventListener) {
        el.addEventListener(ev, func, false);
    } else if (el.attachEvent) {
        el.attachEvent("on" + ev, func);
    } else {
        el["on"+ev] = func; // Note that this line does not stack events. You must write you own stacker if you don't want overwrite the last event added of the same type. Btw, if you are going to have only one function for each event this is perfectly fine.
    }
}

/* To prevent the event: */
addEvent(this.canvas, "mousewheel", function(event) {
    if (!event) event = window.event;
    event.returnValue = false;
    if (event.preventDefault)event.preventDefault();
    return false;
});

Ответ 4

Этот вид отмены, похоже, игнорируется в более новых браузерах Chrome > 18 (и, возможно, других браузерах, основанных на WebKit). Чтобы исключительно захватить событие, вы должны напрямую изменить метод onmousewheel элемента.

this.canvas.onmousewheel = function(ev){
    //perform your own Event dispatching here
    return false;
};