JS-Radereignisse verstehen (Mousewheel/DOMMouseScroll)

Das JS-Radereignis verstehen (Mausrad/DOMMouseScroll)

1. Es gibt kein Ende des Lernens und Überprüfens die Vergangenheit und das Neue lernen

//zxx: Dieser Absatz hat nichts mit Technologie zu tun
Ich habe nicht mehr das fotografische Gedächtnis, das ich hatte, als ich Grundschule war Ich habe an vielen Dingen gearbeitet und bin damit in nur einem Jahr in Berührung gekommen. Danach kann ich mich überhaupt nicht mehr daran erinnern. Sie können sich beispielsweise nicht an die Methode zum Ermitteln des Abstands zwischen einem Element und der Seite erinnern (getBoundingClientRect), oder Sie können sich nicht an die Methode zum Auslösen eines benutzerdefinierten DOM-Ereignisses (dispatchEvent) in modernen Browsern erinnern Lesen Sie die vorherigen Dinge gründlich durch oder nehmen Sie sich etwas Zeit, um sich mit verwandten Dingen zu befassen. Wenn Sie sorgfältig darüber nachdenken, ist es tatsächlich Ihre eigene Schuld, dass Sie sich Dinge nicht merken können, als Sie mit ihnen herumgespielt haben (anstatt sie durch wiederholten Gebrauch zu merken). Beispielsweise bedeutet getBoundingClientRect „Ermitteln Sie die Grenzen des Client-Rechtecks“ oder verwenden Sie die böse Schreibweise, um sich an „Schnitt (g) erzwingen (b) ficken (c) weich (r)“ zu erinnern. Die DispatchEvent-Methode verwendet „3 Schritte“, „create (createEvent) – initial (init*Event) – Dispatch (dispatchEvent)“.

Das Tempo des Lernens kann nicht aufhören. Diese „Perversen“, die bis zum Ende stehen, haben auch Dinge, die sie nicht wissen. Offensichtlich wissen wir Junioren, insbesondere unser jüngeres Ich, nicht noch mehr. Wer war als Kind nicht mehr oder weniger verwirrt und fragte sich: „Wo ist der Weg?“ und „In welche Richtung soll ich gehen?“ Das Tempo des Lernens kann nicht aufhören. Wenn Sie durchhalten, wird der Weg klar und Sie wissen, wohin Sie als nächstes gehen müssen. Seien Sie einfach schüchtern und machen Sie sich durch, Jugend ist Ihr Kapital, gehen Sie ohne zu zögern voran.

Ich befinde mich aufgrund meines Interesses auf dem aktuellen Weg. Es ist ein reines Hobbystudium (ich mag diese Dinge, ich möchte lernen), kein professionelles Studium (ich werde alles lernen, was nötig ist, um es zu tun). Ende). Während dieser Jahre der Arbeit hat meine Beschäftigung mit Technologie und Produkten unwissentlich meine Sicht eingeschränkt. Glücklicherweise hat die Erkenntnis, dass es ein Problem gibt, tatsächlich die Hälfte des Problems gelöst. Der Grund, warum ich das hier sage, ist, mich daran zu erinnern, dass es immer noch wichtig ist, etwas über Technologie und Produkte zu lernen. Ich muss nur mehr nach oben schauen und die Welt außerhalb des Büros betrachten (nicht das oberflächliche Verständnis, das ich durch Stöbern gewonnen habe). Weibo).

Gestern bin ich zufällig auf das „Rad-Ereignis“ gestoßen, als ich mich zuvor mit „benutzerdefinierten Bildlaufleisten“ beschäftigt habe, aber dies wurde basierend auf dem Mausrad-Ereignis implementiert, das MooTools bereits hat Wenn Sie mir den Implementierungsmechanismus, die Browserkompatibilitätsunterschiede usw. mitteilen möchten, war ich sprachlos. Das Lernen hat kein Ende, also probieren Sie es aus, üben Sie es und klären Sie es.

2. Kompatibilitätsunterschiede

Die Kompatibilitätsunterschiede von Scrollrad-Ereignissen sind etwas vielseitig, nicht die vorherige IE8-Sekte und andere Fraktionen, sondern die FireFox-Fraktion und andere Fraktionen.

Browser einschließlich IE6 verwenden onmousewheel, während FireFox-Browser DOMMouseScroll verwendet. Nach meinen eigenen Tests wird onmousewheel selbst unter FireFox 19 nicht erkannt.

Einer der einfachsten Nutzungsunterschiede (die Bildlaufleiste des Körpers wird durch ein internes Div einer bestimmten Höhe unterstützt):

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

document.body.addEventListener("DOMMouseScroll" , function(event ) {
console.dir(event);
});

Die oben genannten Ausgabeunterschiede werden unten angezeigt (IE7, IE10, Chrome und Firefox). , mit der Maus nach unten scrollen, win7) (Sie können auf diese Seite klicken, um den Tabelleninhalt separat anzuzeigen):

3. Kompatible Rad-Ereignismethoden

Kenne dich selbst und den Feind und du wirst gewinnen In jedem Kampf weiß man, wie man mit den Unterschieden umgeht. Schließlich schreiben wir keine JS-Bibliothek. Wir befassen uns hier nur mit dem Unterschied in der Bildlaufrichtung.

Integrieren Sie unsere üblichen Methoden zum Hinzufügen von Ereignissen, also gibt es (der Code unten ist 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);        
});

So können wir das Mausrad-Ereignis einfach verwenden. Zum Beispiel:

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

Der entsprechende Code wird wie folgt implementiert (Codename 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();
            });
        }
    };
});

Das Prinzip ist sehr einfach, das Scrollrad Änderungen, der Index ändert sich, das heißt, die Endposition der Liste ändert sich und die Animation erreicht die Zielposition.

Dann kann die Demoseite einfach mit seajs aufgerufen werden!

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

Das ist alles. Für einige spezifische Details, wie den HTML-Teil oder die Implementierung der Animation, können Sie sich die Codeanzeige ansehen.

Dem Effekt nach zu urteilen, verfügt das Scrollen unter IE6- und IE7-Browsern jedoch nicht über die Bildlaufleiste der Hold-Seite. Ich hoffe, dass Kollegen mit einschlägiger Erfahrung Hinweise geben und optimieren können Scrollen unter IE7/IE7-Browsern Erleben Sie den Effekt.

Ursprünglich wollte ich eine Demo einer benutzerdefinierten Bildlaufleiste hinzufügen, als ich nachschaute, dass es bereits 1:11:11 war. Was für eine unglückliche Zahl Kalender, heute ist kein guter Zeitpunkt, eine Demo zu schreiben. Also Epilog zum Schlafen.

Empfohlenes Tutorial: „JS Basic Tutorial“

Das obige ist der detaillierte Inhalt vonJS-Radereignisse verstehen (Mousewheel/DOMMouseScroll). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!