Comprendre les événements de la roue JS (mousewheel/DOMMouseScroll)

Comprendre l'événement de roue JS (mousewheel/DOMMouseScroll)

1. Il n'y a pas de fin à l'apprentissage, à la révision. le passé et apprendre le nouveau

//zxx : Ce paragraphe n'a rien à voir avec la technologie Certains reproches très personnels peuvent être ignorés
Je n'ai plus la mémoire photographique que j'avais lorsque j'étais primaire. étudiant. J’ai travaillé sur beaucoup de choses et je suis entré en contact avec elles en seulement un an, je ne m’en souviens plus du tout. Par exemple, je ne me souviens pas de la méthode permettant d'obtenir la distance entre un élément et la page (getBoundingClientRect), ni de la méthode permettant de déclencher un événement personnalisé DOM (dispatchEvent) dans les navigateurs modernes. réviser correctement, lire les choses précédentes, ou avoir du temps libre. Il faut quand même prendre le temps de s'occuper des choses liées. En fait, si vous y réfléchissez bien, c'est de votre faute si vous ne parvenez pas à vous souvenir des choses. Vous n'avez pas trouvé de moyen de vous en souvenir lorsque vous les manipuliez (plutôt que de vous en souvenir en les utilisant de manière répétée). Par exemple, getBoundingClientRect signifie « obtenir les limites du rectangle client », ou utilisez une notation maléfique pour mémoriser « couper (g) forcer (b) baiser (c) doux (r) ». La méthode dispatchEvent utilise "3 étapes", "create (createEvent) - initial (init*Event) - dispatch (dispatchEvent)".

Le rythme de l’apprentissage ne peut pas s’arrêter. Ces « pervers » qui tiennent jusqu'au bout ont aussi des choses qu'ils ne savent pas. Évidemment, nous, les juniors, en particulier nos plus jeunes, n'en savons pas encore plus. Qui n'a pas été plus ou moins confus quand il était jeune, se demandant « où est la route ? » et « quelle direction dois-je aller ? ». Peu importe ce que vous choisissez, le rythme de l'apprentissage ne peut pas s'arrêter. Si vous persévérez, le chemin deviendra clair et vous saurez où aller ensuite. J'ai juste peur d'être timide et de me débrouiller. La jeunesse est votre capital, alors avancez sans hésiter.

Je suis sur le chemin actuel en fonction de mes intérêts. C'est purement une étude de passe-temps (j'aime ces choses, je veux apprendre), pas une étude professionnelle (j'apprendrai tout ce qui est nécessaire pour faire avant- fin). Au cours de ces années de travail, mon immersion dans la technologie et les produits a, sans le savoir, limité ma vision. Heureusement, prendre conscience de l'existence du problème a en fait résolu la moitié du problème. La raison pour laquelle je dis cela ici est pour me rappeler que je ne dois pas en faire trop. L'apprentissage de la technologie et des produits est toujours important. J'ai juste besoin de chercher davantage et de regarder le monde en dehors du bureau (et non les connaissances superficielles acquises en naviguant). Weibo).

Hier, j'ai rencontré par hasard "l'événement wheel". J'ai utilisé l'événement mouse wheel lorsque je parlais de "barres de défilement personnalisées" auparavant, mais ceci est basé sur l'événement mousewheel que MooTools est déjà compatible. avec. Si vous voulez me dire, Le mécanisme de mise en œuvre, les différences de compatibilité des navigateurs, etc., j'étais abasourdi. Il n’y a pas de fin à l’apprentissage, alors vérifiez-le, pratiquez-le et faites le tri.

2. Différences de compatibilité

Les différences de compatibilité des événements avec molette de défilement sont quelque peu éclectiques. Il ne s'agit pas de la précédente secte IE8 et d'autres factions, mais de la faction FireFox et d'autres factions.

Les navigateurs, y compris IE6, utilisent onmousewheel, tandis que le navigateur FireFox utilise DOMMouseScroll. Après mes propres tests, même sous FireFox 19, onmousewheel n'est pas reconnu.

Une des différences d'utilisation les plus simples (la barre de défilement du corps est supportée par un div interne d'une certaine hauteur) :

document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);

document.body.addEventListener("DOMMouseScroll" , function(event ) {

console.dir
});

Les différences de sortie ci-dessus sont indiquées ci-dessous (IE7, IE10, Chrome et FireFox , faites défiler vers le bas avec la souris, win7) (Vous pouvez cliquer sur cette page pour afficher le contenu du tableau séparément) :

3. Méthodes d'événements de roue compatibles

Connaissez-vous et connaissez l'ennemi et vous gagnerez. chaque bataille. Si vous connaissez les différences, vous saurez comment les gérer. Après tout, nous n’écrivons pas de bibliothèque JS. Nous traitons ici uniquement de la différence de sens de défilement.

Intégrez nos méthodes habituelles d'ajout d'événements, donc il y a (le code ci-dessous est addEvent.js) :

/**
 * 简易的事件添加方法
 */
 define(function(require, exports, module) {
    exports.addEvent = (function(window, undefined) {        
        var _eventCompat = function(event) {
            var type = event.type;            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            //alert(event.delta);
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }            /* 
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {                if (type === "mousewheel" && document.mozHidden !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            }
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));    
                });
            }
        }
        return function() {};    
    })(window);        
});

Ainsi, nous pouvons utiliser l'événement mousewheel facilement. Par exemple :

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了！"); }
});

Le code correspondant est implémenté comme suit. Ce qui suit montre les codes de base pour un mouvement fluide (nom de code slide.js) :

/**
 * 简易的列表左右滑动切换效果
 * 鼠标事件是关键，因此，一些数值写死在方法中，纯测试用
 */
 define(function(require, exports, module) {    var Event = require("/study/201304/addEvent.js");
    var _move = function(ele, to, from) {        // 动画实现
        // ...
    };
    return {
        index: 0,
        visible: 4,
        init: function(box) {            // box指滚动的列表容器
            var self = this
              , length = box.getElementsByTagName("li").length;            Event.addEvent(box.parentNode, "mousewheel", function(event) {
                 if (event.delta > 0 && self.index > 0) {                    // 往上滚
                    self.index--;
                 } else if (event.delta < 0 && self.index < length - self.visible) {                     // 往下
                     self.index++;                     
                 } else {
                    return; 
                 }
                 _move(box, -1 * self.index * 140);    
              
                 event.preventDefault();
            });
        }
    };
});

Le principe est très simple, la molette de défilement. change, l'index change, c'est-à-dire que la position finale de la liste change et l'animation atteint la position cible.

Ensuite, la page de démonstration peut être simplement appelée en utilisant seajs !

var $ = function(id) {
    return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
    slide.init($("slideBox"));
});

Ça y est. Pour certains détails précis, comme la partie HTML ou la mise en place de l'animation, vous pouvez vous rendre sur la démo pour voir l'affichage du code.

Cependant, à en juger par l'effet, le défilement sous les navigateurs IE6 et IE7 n'a pas la barre de défilement de la page d'attente. Il en va de même pour de nombreuses autres tentatives. J'espère que des collègues ayant une expérience pertinente pourront donner des conseils et optimiser le processus. défilement sous les navigateurs IE7/IE7 Découvrez l’effet.

À l'origine, je voulais ajouter une démo d'une barre de défilement personnalisée. Quand j'ai regardé l'heure, j'ai vérifié et il était déjà 1:11:11. Quel numéro malchanceux j'ai regardé le Programmer's Fortune Perpetual. Calendrier , aujourd’hui n’est pas le bon moment pour écrire une démo. Alors, épilogue pour dormir.

Tutoriel recommandé : "Tutoriel de base JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!