鼠标滚轮事件

    <script>
        window.onload= function () {
            var div1=document.getElementById('div1');
            
            div1.onmousewheel= function () {
                alert(1);
            };

            if(div1.addEventListener){
                div1.addEventListener('DOMMouseScroll',function(){
                    alert(0);
                },false);
            }
            
        };
    </script>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
        }
    </style>
    <script>
        window.onload= function () {
            var div1=document.getElementById('div1');
            var  b=true;
            div1.onmousewheel=fn;

            if(div1.addEventListener){
                div1.addEventListener('DOMMouseScroll',fn,false);
            }

            function fn(ev){

                var ev=ev || event;
//               alert(ev.wheelDelta);   //ie chrome下-120  上120
                                         //ff  ev.detail  下 3 上-3

                if(ev.wheelDelta){
                    b=ev.wheelDelta>0?true:false;
                }else{
                    b=ev.detail>0?false:true;
                }

                if(b){
                    this.style.height=parseInt(getByClass(this,'height'))-10+'px';
                }else{
                    this.style.height=parseInt(getByClass(this,'height'))+10+'px';

                }
                if(ev.preventDefault){
                   ev.preventDefault();
                }
                return false;  //阻止的是obj.on事件名称所触发的默认行为,
                // ff是通过addEventListener绑定的,它需要通过ev.preventDefault()
            }
            function getByClass(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }
        };
    </script>
</head>
<body style="height: 2000px">
<div id="div1"></div>

<!--ie/chrome   onmousewheel-->
<!--ff:DOMMouseScroll 必须用addEventListener实现绑定-->
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题其中火狐浏览器事件为:"DOMMousescrol...
    小雞雞炖蘑菇阅读 3,142评论 1 2
  • 通过一个小例子来介绍鼠标的滚轮事件,通过鼠标向上滚动来放大图片,向下滚动来缩小图片下面是HTML文档 下面是封装的...
    likeli阅读 1,943评论 1 1
  • 鼠标滚轮事件有兼容性的问题,主要是firfox和其他浏览器的差异,以下就这两种情况分开说明: 其他浏览器 事件名称...
    llpy阅读 2,695评论 0 1
  • 今天,我要的东西到货了,一下子出帐17 00-.心里还是挺心疼的,毕竟那是我长时间的积蓄,还有孩子的钱,我不...
    专职爱人alan阅读 2,498评论 0 0