兼容各浏览器的鼠标滚轮事件

今天趁着工作闲暇的时间,写了一个简单的兼容各浏览器的鼠标滚轮方法:

代码:

    function mouseWheel(){

        if(document.addEventListener){

            document.body.addEventListener(‘mousewheel‘,function(e){
                Detail(e);
                e.stopPropagation();
                e.preventDefalut();
            });

            document.body.addEventListener(‘DOMMouseScroll‘,function(e){
                Detail(e);
                e.stopPropagation();
                e.preventDefault();
            })
        }else{
            document.body.attachEvent(‘onmousewheel‘,function(event){
                Detail(event);
                event.cancelBubble=true;
                event.returnValue=false;
            })
        }

        function Detail(e){
            ((-e.detail || e.wheelDelta)>0)?alert(‘top‘):alert(‘down‘);
        }
    }
时间: 2024-08-25 03:25:47

兼容各浏览器的鼠标滚轮事件的相关文章

JS鼠标滚轮事件解析

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

【学】鼠标滚轮事件兼容写法

鼠标滚轮的写法要注意以下几个知识点: ie,chrome下有onmousewheel事件,而ff是DOMMouseScroll事件,而且只能通过addEventListener来添加,而同时为了兼顾ie9下面所以在事件添加的时候就要做判断 为了判断是向上还是向下滚动,ie和chrome下是通过event事件对象的wheelDelta属性来判断,而ff下是event的detail值判断,但由于向上和向下滚动对应的正负关系,wheelDelta和detail正好是相反的,那可以直接通过正负值来判断滚

鼠标滚轮事件---兼容

鼠标滚轮事件绑定及滚轮方向兼容demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ width: 200px; height: 200px; background: pink

鼠标滚轮事件的监听

鼠标滚轮事件的监听原理:判断鼠标滚轮的滚动获取一个值,根据这个值判断滚动的方向.分析:首先,判断滚轮方向.Firefox:detail,取值为-/+3(负值向上,正值向下):其他:wheelDelta,取值为+/-120(正值向上,负值向下).兼容所有浏览器的的封装: ? 1 2 3 4 5 6 7 8 9 10 function scrollEvent(ev){     ev = ev || window.event;     var data = '';     if(ev.wheelDel

鼠标滚轮事件MouseWheel

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 却不支持此事件,不过庆幸 Firefox  中提供了另外一个等同的事件:"DOMMouseScroll" . OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function () { if (window.addEventListener

鼠标滚轮事件介绍

简介 IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这 个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera, Safari等也都实现了该事件.Opera10之前的版本对wheelDelta值的符号处理错误,需要修改.但是Firefox没 有该事件,而是用DOMMouseScroll.这个事件只有Firefox支持,所以可以单独针对Firefox做兼容. 另外,H

JS事件-鼠标滚轮事件

之前学习了onmouseover,onmousedown等鼠标事件,今天来看看鼠标的滚轮事件,浏览器兼容一直是让人比较恶心的事情,今天就让我们将恶心进行到底,看看这个恶心的鼠标滚轮事件! 鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的,但是火狐FF下却不识别onmousewheel,在FF下需要用DOMMouseScroll,并且必须用"事件监听"方式添加事件才有效: 而大家都知道"事件监听"方式绑定事件: IE下是通过at

js中的鼠标滚轮事件

## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = function(ev){ var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用: //以上代码可以判断是否传递了事件对象参数,如果传递了则使用传递的事件对象ev,否则使用window.event alert(oEvent.type);//cl

鼠标滚轮事件

由于浏览器的不同,对鼠标滚轮事件也有所不同,大致可分为DOMMouseScroll 和onmousewheel两类 1.第一类是Firefox支持的DOMMouseScroll事件,此事件必须以addEventListener来绑定,当鼠标滚轮上下滚动时 ev.detail向上为-3,向下为3. 2.第二类是IE/chrome支持的onmousewheel事件,当鼠标滚轮上下滚动时 ev.wheelDelta向上为120,向下为-120.