JS滚轮事件封装】的更多相关文章

wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.indexOf('Firefox')==-1){ if(document.attachEvent){ document.attachEvent('onmousewheel',fn); }else{ document.addEventListener('mousewheel',fn); } }else{ d…
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefox浏览器使用 DOMMouseScroll 事件,一个最简单的测试demo如下:HTML代码如下: <div style="height:2000px"></div>页面滚动条滚动的时候,使用js去监听事件如下: document.body.onmousewheel…
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是…
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" /> <meta name="viewport" content=…
典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件.滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScro…
首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel事件,建议使用onwheel鼠标事件. 该事件的浏览器支持是: 这样就不用再分浏览器绑定事件了,如果不用兼容太低的版本或者safari浏览器. 现在五大浏览器(IE.Opera.Safari.Firefox.Chrome)中Firefox 使用detail,其余四类使用wheelDelta:两者只在…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 300px; height: 300px; background: red; } </style> <script> function addEven…
/** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, undefined) { var _eventCompat = function(event) { var type = event.type; if (type == 'DOMMouseScroll' || type == 'mousewheel') { event.delta = (event.…
js原生事件封装 // 事件处理对象 var EventUtil = { // 添加事件监听 add: function(element, type, callback){ if(element.addEventListener){ element.addEventListener(type, callback, false); } else if(element.attachEvent){ element.attachEvent('on' + type, callback); } else {…
js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件.   /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousew…