js滚轮事件需要注意的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
    <script>
        function addEvent(obj,sEv,fn){
            if(obj.addEventListener){
                return obj.addEventListener(sEv,fn,false);
            }else{
                return obj.attachEvent(‘on‘ + sEv,fn);
            }
        }

        function addWheel(obj,fn){
            function wheel(ev){
                var oEvent = ev || event;
                var bDown = true;
                bDown = oEvent.wheelDelta?oEvent.wheelDelta > 0:oEvent.detail < 0;
                fn && fn(bDown);
                oEvent.preventDefault && oEvent.preventDefault();
                return false;
            }------------------------------------------------------------------return false阻止浏览器默认行为,遇到绑定添加的事件的时候就失效了;所有要用oEvent.preventDefault();在使用此方法前要做判断;------------------------------------------------------------------
            if(window.navigator.userAgent.indexOf(‘Firefox‘) !=-1){
                obj.addEventListener(‘DOMMouseScroll‘,wheel,false);注:所有以DOM开头的只能通过事件绑定的形式添加此事件;
            }else{
                addEvent(obj,‘mousewheel‘,wheel);
            }
        }-------------------------------------------------------------------------------------------------
  obj.onmousewheel:滚动鼠标滚轮的时候触发;兼容IE系列和chrome;    DOMMouseScroll:只能通过事件绑定的形式添加此事件;只兼容FF;    兼容性问题解决方案:判断浏览器;    oEvent.wheelDelta:不兼容FF;火狐下报undefined;        chrome&&IE:            下:-120;//以具体弹出数字为准            上:120;

oEvent.detail:        FF:            下:3;//以具体弹出数字为准---------------------------------------------------------------------------------------------------
     window.onload = function () {            var oDiv = document.getElementById(‘div‘);            addWheel(oDiv,function(bDown){                oDiv.onmousewheel = null;                if(bDown){                    oDiv.style.height = oDiv.offsetHeight - 10 + ‘px‘;                }else{                    oDiv.style.height = oDiv.offsetHeight + 10 + ‘px‘;                }            });        }    </script></head><body><div id="div"></div></body></html>
滚轮事件的兼容性问题比较多,所以大家在实现这个效果的时候也要随时测试兼容性的问题。暂时整理的大概就这些,还有很多不足的地方,大家多提宝贵意见!^_^  
时间: 2024-10-29 02:00:38

js滚轮事件需要注意的兼容性问题的相关文章

JS滚轮事件(mousewheel/DOMMouseScroll)了解

已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是

JS滚轮事件(mousewheel/DOMMouseScroll)了解 (转载)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3175 一.学无止境.温故知新 //zxx: 本段与技术无关,一些很个人的吐槽,可以跳过已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事

JS 滚轮事件 滚屏效果

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下. 其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下. 监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener. 有Kissy版

js 滚轮事件 滚轮焦点图(轮播图)

利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" /> <meta name="viewport" content=

JS滚轮事件封装

wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.indexOf('Firefox')==-1){ if(document.attachEvent){ document.attachEvent('onmousewheel',fn); }else{ document.addEventListener('mousewheel',fn); } }else{ d

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

JS 封装事件(鼠标事件举例)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 p{ 9 width:200px; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <

JS鼠标滚轮事件解析

一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有firefox支持) 另外在操作的过程中需要添加事件监听,兼容性写法 代码如下: /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C

两种js监听滚轮事件的方式

前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //监听并注册匿名函数window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.