jquery 兼容的滚轮事件

 1 // jquery 兼容的滚轮事件
 2                 $(document).on("mousewheel DOMMouseScroll", function (e) {
 3                     var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
 4                         (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
 5                     if (delta > 0) {
 6                         // 向上滚
 7                         console.log("wheelup");
 8                     } else if (delta < 0) {
 9                         // 向下滚
10                         console.log("wheeldown");
11                     }
12                 });
时间: 2024-11-10 08:57:22

jquery 兼容的滚轮事件的相关文章

mousewheel滚轮事件

原生的滚轮事件:火狐与其他浏览器使用了不同的事件 /* * 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel; * */ // firefox document.body.addEventListener("DOMMouseScroll", function(event) { var direction= event.detail && (event.detail > 0 ? "mousedown

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

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自定义事

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

clientX/Y           可视区的鼠标坐标                  全兼容 offsetX/Y           鼠标坐标到物体边框的距离    IE+Chrome pageX/Y             页面                                    高级 浏览器 screenX/Y           屏幕                                    全兼容(没用) var e =  evt || window.

jquery 鼠标滚轮事件 插件 Mousewheel

jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件. 使用mousewheel事件有以下两种方式: 使用mousewheel和unmousewheel事件函数: 使用经典的bind和unbind函数. JavaScript Code复制内容到剪贴板 $('div.mousewheel_example').mousewheel(fn); $('div.mousewheel_example').bind('mous

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

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

封装得滚轮事件,兼容方法。。。拿去用吧

var addEvent = (function(window, undefined) { var _eventCompat = function(event) { var type = event.type; if (type == 'DOMMouseScroll' || type == 'mousewheel') { event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; }

鼠标滚轮事件---兼容

鼠标滚轮事件绑定及滚轮方向兼容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