js 捕捉滾輪的滾動
阿新 • • 發佈:2018-11-02
滾動方向區分為正負:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //去掉預設的contextmenu事件,否則會和右鍵事件同時出現。 document.oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("test").onmousedown = function(e){ if(e.button ==2){ alert("你點了右鍵"); }else if(e.button ==0){ alert("你點了左鍵"); }else if(e.button ==1){ alert("你點了滾輪"); } } } </script> </head> <body> <label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta"/> <label for="detail">滾動值:(Firefox)</label><input type="text" id="detail"/> <script type="text/javascript"> var scrollFunc=function(e){ ee=e || window.event; var t1=document.getElementById("wheelDelta"); var t2=document.getElementById("detail"); if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail; } } /*註冊事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </script> <div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div> </body> </html>