鼠标滚动事件 - onmousewheel
1.Jquery-MouseWheel
jquery默认是不支持支持鼠标滚轮事件(mousewheel)
jquery MouseWheel下载:https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js
然后就可以使用mousewheel和unmousewheel事件函数了
$('div.mousewheel_example').mousewheel(fn);
$('div.mousewheel_example').bind('mousewheel', fn);
Jquery MouseWheel兼容性
- FireFox浏览器使用DOMMouseScroll事件,其他(包括IE6)都是使用onmousewheel事件;
- FireFox中wheelDelta判断滚动方向,其值为120/-120,为负数的时候表示向下滚动,整数的时候向上滚动
- 其他:detail(属性)判断方向,返回值是3的整数倍(3/-3), 为正数表示向上滚动,负数向下滚动
- opera:同时拥有wheelDelta和detail,其中“detail”属性返回值和FF中的wheelDelta相同
使用实例
1 // jquery 兼容的滚轮事件
2 $(document).on("mousewheel DOMMouseScroll", function (e) {
3
4 var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
5 (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
6
7
8 if (delta > 0) {
9 // 向上滚
10 console.log("wheelup");
11 } else if (delta < 0) {
12 // 向下滚
13 console.log("wheeldown");
14 }
15 });
2.使用js原生实现滚轮事件
但是考虑到兼容性
IE下通过attachEvent实现事件监听
Chrome和FF通过addEventListener来实现事件监听
但是FF滚轮事件是:DOMAMouseSrcoll
其他浏览器:onmousewheel
事件监听 | 滚轮事件 | |
Chrome | addEventListener | onmousewheel |
IE | attachEvent | onmousewheel |
FF | addEventListener | DOMAMouseSrcoll |
所以我自己封装了一个兼容各浏览器的方法
addEvent: function(obj, xEvent, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + xEvent, fn);
} else {
obj.addEventListener(xEvent, fn, false);
}
},
调用:
this.addEvent($(document),"mousewheel",callback); //其他
this.addEvent($(document),"DOMMouseScroll",callback); //FF
鼠标滚动事件 - onmousewheel的更多相关文章
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- vue组件添加鼠标滚动事件
在一个组件标签上加鼠标滚动事件,应该写成 @mousewheel.native
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
- 鼠标滚动事件兼容性 wheel、onwheel
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
- js监控鼠标滚动事件
//滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...
- 解决ScrollViewer嵌套的DataGrid、ListBox等控件的鼠标滚动事件无效
C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个DataGrid.ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果 ...
随机推荐
- jquery轻松实现li标签上下滚动的原理
在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等.那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果. 我先写个布局吧 <di ...
- 1、<img />标签
alt:当图片不显示时的文字说明 title:鼠标悬停在图片上的出现的文字说明
- C#第十三天
1.单例模式 1)将构造函数私有化 2)提供一个静态方法,返回一个对象 3)创建一个单例 namespace 单例模式 { public partial class Form1 : Form { pu ...
- Knockout js 绑定 radio 时,当绑定整形的时候,绑定不生效
解决方案: 使用checkedValue和checked 组合,如下代码. <div><input type="radio" name="flavorG ...
- JavaFx的一些总结
JavaFX的一些总结:1.场景scene.布局layout.控件control是javaFX的基本组成部分.控件可以放到布局中,布局可以放到布局中,也可以放到场景中,这里要注意,场景里只能放一个布 ...
- canvas绘图基础及基于粒子系统的雪花飘落
canvas是html中的一个元素,可以通过js操控绘图! 可以绘制各种图形,各种填充样式! 绘制时可以进行旋转,缩放,平移,但并不是很灵活! 有一对比较好用的方法是save restore! sav ...
- URL中文参数乱码的一个解决办法
浏览器对有中文参数的url大部分都用utf-8编码,但我也曾经遇见过用GB2312编码的:如果遇见这样情况,那么接受到的参数就会出现乱码.乱码情况视服务器解码方式,Asp.Net网站一般默认为ut ...
- Date对象 识记
1.Date 对象创建 var myDate=new Date() 2.Date 对象属性 constructor pototype 3.Date 对象方法 Date() ...
- 二十七、oracle 例外
一.例外分类oracle将例外分为预定义例外.非预定义例外和自定义例外三种.1).预定义例外用于处理常见的oracle错误.2).非预定义例外用于处理预定义例外不能处理的例外.3).自定义例外用于处理 ...
- Design Pattern——Factory_DP
namespace TEST { //用于生成一个对应的操作类,这个工厂只是用来产生操作类的,不做其他只用 public class Factory { public Operate GetOpetr ...