浅析javascript鼠标滚动事件Mousewheel绑定的方法

滚轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。

Firefox使用DOMMouseScroll，其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉 滚轮信息，其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用 addEventListener方法绑定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll’, func, false);IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法，其他主流浏览器并不识别微软的这个方法。

 代码如下 复制代码
<script type="text/javascript">
(function($){
    var box = document.getElementById('box');
    $(box).mouseover(function(){
         box.addEventListener('DOMMouseScroll', wheel_Fox, false);
         box.onmousewheel = wheel_or;
    });
    if (box.addEventListener) {
       box.addEventListener('DOMMouseScroll', wheel_Fox, false);
    }
    //谷歌，120一次
    box.onmousewheel = wheel_or;
    function wheel_Fox(event){
        event.target.innerHTML = event.detail;
        event.stopPropagation();
        event.preventDefault();
        var $oldTop=parseInt($(box).css('marginTop'));
        $(box).css('marginTop',$oldTop-event.detail+"px");
    }
    function wheel_or(event){
        event = event || window.event;
        box.innerHTML = event.wheelDelta;
        event.returnValue = false;
        var $oldTop=parseInt($(box).css('marginTop'));
        $(box).css('marginTop',$oldTop-(event.wheelDelta/120*3)+"px");
    }
})(jQuery)
</script>

测试之后得到如下的结论。

•Firefox 鼠标滚轮向上滚动是-3，向下滚动是3
•IE 鼠标滚轮向上滚动是120，向下滚动是-120
•Safari 鼠标滚轮向上滚动是360，向下滚动是-360
•Opera 鼠标滚轮向上滚动是120，向下滚动是-120
•Chrome 鼠标滚轮向上滚动是120，向下滚动是-120
有 人在Safari下做了一些测试：”只是滚动一圈的话，值为+-0.1，如果滚动地稍微快点的话（多滚动几圈），这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次，浏览器滚动1像素，滚动3次，浏览器却滚动30像素”。同时他也对Camino（基于Gecko的内核引擎）进行研 究：“与Safari相似（+- 0.3 to +-Infinity），虽然使用了与firefox相同的内核引擎，但结果这个delta值却只在+-2.666666里浮动，无论滚动速度如何

获取鼠标滚轮值，判断滚动方向

JavaScript获取鼠标滚轮值，这里的值只有“1”和“-1”两种情况，请选按着中轮滚动，激活后可以不按，直接滚动。程序根据取值可以判断出滚轮的滚动方向，是向上滚还是向下滚，

时间： 2024-09-17 04:50:48

浅析javascript鼠标滚动事件Mousewheel绑定的方法的相关文章

学习JavaScript鼠标响应事件_javascript技巧

本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r

javascript鼠标悬停事件！

问题描述 javascript鼠标悬停事件! 我想让一个div在我悬停在某处超连接的时候显示出来.移开的是时候隐藏.求大神解答!最好有代码! 解决方案 设置在 script 里 增加 两个方法 用以修改 div 的display 样式 并在 超链接处 设置 属性 onmouseon onmouseover 分别 调用 display的 显示和隐藏方法 解决方案二: 额.错了 是 onmouseover 鼠标悬停 和 ommouseout 鼠标移开 这两个属性 解决方案三: 鼠标悬停事件css 鼠

html中鼠标滚轮事件onmousewheel的处理方法_javascript技巧

滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍. Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel.滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta.不知道为何在该问题上其他厂商和微软的如此一致.Firefox可

浅析JavaScript中的事件机制

  这篇文章主要介绍了JavaScript中的事件机制,即JS与HTML的一般交互,需要的朋友可以参考下 事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档

javascript 鼠标滚轮事件例子

滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试,即使现在FireFox 19下,也是不识onmousewheel.  代码如下 复制代码 //非ie document.body.onmousewheel = function(event) {     event = event || window.event;     

浅析javascript中的事件代理_javascript技巧

本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li

浅析JavaScript中的事件机制_基础知识

 事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档对象模型(DOM)第3级,每一个HTML元素的一部分有一套可以触发JavaScript代码事件. 例子:

深入浅析JavaScript中对事件的三种监听方式_javascript技巧

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>

javascript 鼠标滚轮事件_javascript技巧

今天在网上找来了响应滚轮的函数并改写成下面的类 复制代码 代码如下: function wheelEvent(obj, handle) { this.handle = handle; // different events between Firefox and IE window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this