web-dev-qa-db-fra.com

Javascript: Capturez l'événement de la molette de la souris et ne faites pas défiler la page?

J'essaie d'empêcher un événement de roue de souris capturé par un élément de la page de provoquer un défilement.

Je m'attendais à ce que false comme dernier paramètre ait le résultat attendu, mais l'utilisation de la molette de la souris sur cet élément "canvas" provoque toujours le défilement:

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

En dehors de cet élément "canvas", le défilement doit avoir lieu. A l'intérieur, il ne doit déclencher que la méthode .wheel(). Qu'est-ce que je fais mal?

javascriptscrollmousemousewheel
27
Jem

Vous pouvez le faire en renvoyant false à la fin de votre gestionnaire.

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

Mis à jour pour utiliser l'événement wheel comme mousewheel déconseillé pour le navigateur moderne, comme indiqué dans les commentaires.

La question était d'empêcher le défilement de ne pas fournir le bon événement, veuillez donc vérifier les exigences de prise en charge de votre navigateur pour sélectionner le bon événement pour vos besoins.

36
GillesC

Avez-vous essayé event.preventDefault() pour empêcher le comportement par défaut de l'événement?

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

Gardez à l'esprit que de nos jours mouswheel est déconseillé au profit de wheel , vous devez donc utiliser

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

En ajoutant simplement, je sais que le canevas est uniquement HTML5 donc ce n'est pas nécessaire, mais juste au cas où quelqu'un voudrait une compatibilité crossbrowser/oldbrowser, utilisez ceci:

/* 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;
});
3
Jorge Fuentes González

Ce type d'annulation semble être ignoré dans les nouveaux navigateurs Chrome> 18 (et peut-être d'autres navigateurs WebKit). Pour capturer exclusivement l'événement, vous devez modifier directement la méthode onmousewheel de l'élément.

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