Sự kiện quay số trong các trình duyệt hiện đại

Question

Tôi muốn có JavaScript sạch và đẹp cho sự kiện con lăn, chỉ hỗ trợ phiên bản mới nhất của các trình duyệt phổ biến mà không có mã cũ cho các phiên bản lỗi thời mà không có bất kỳ khung công tác JS nào.

Sự kiện quay số được giải thích một cách độc đáo here. Làm thế nào để đơn giản hóa nó cho các phiên bản mới nhất của các trình duyệt?

Tôi không có quyền truy cập vào tất cả các trình duyệt để kiểm tra, vì vậy caniuse.com là trợ giúp tuyệt vời cho tôi. Than ôi, con lăn chuột không được đề cập ở đó.

Dựa trên nhận xét của Derek, tôi đã viết giải pháp này. Nó có hợp lệ cho tất cả các trình duyệt không?

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) { 
    e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40; 
    // custom code 
}); 

Answer 1

Dưới đây là một bài báo mô tả này, và đưa ra một ví dụ:

http://www.sitepoint.com/html5-javascript-mouse-wheel/

mã có liên quan, trừ các ví dụ cụ thể nhất định thay đổi kích thước một hình ảnh:

var myitem = document.getElementById("myItem"); 
if (myitem.addEventListener) 
{ 
    // IE9, Chrome, Safari, Opera 
    myitem.addEventListener("mousewheel", MouseWheelHandler, false); 
    // Firefox 
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
} 
// IE 6/7/8 
else 
{ 
    myitem.attachEvent("onmousewheel", MouseWheelHandler); 
} 

function MouseWheelHandler(e) 
{ 
    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    return false; 
} 

Answer 2

Các mousewheel sự kiện không chuẩn và MDN recommend số wheel event.

var item = document.getElementById('item') 
item.addEventListener('mousewheel', function(e) { 
    console.log('event', e) 
}, false)