动手封装一个滚轮事件吧!

/*滚轮事件函数封装*/

Object.prototype.onmousewheelhandlefun=function(handle){

  var info=navigator.userAgent;

  var down=null;

  if(info.indexOf("Firefox")!=-1){

   this.addEventListener("DOMMouseScrool",funciton(event){

      var ev=event||window.event;

      if(ev.detail){

        down=ture;

      }else{

        down=false;

      }

      handle.apply(this,[down,ev]);

    },false) 

  }else{

    this.onmousewheel=function(event){

      var ev=event||window.event;

      if(ev.wheelDelta>0){

        down=false; 

      }else{

        down=ture;

      }

      handle.apply(this,[down,ev]);

    }

  }

}

/*调运方法不写了哈,简单的一个封装*/

时间: 2024-08-11 01:35:44

动手封装一个滚轮事件吧!的相关文章

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

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; }

如何优雅的封装一个DOM事件库

1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级事件只能给元素的某一个行为绑定一次方法,第二次绑定会把前面的覆盖掉. DOM 2级事件是让DOM元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法来实现的. DOM 2可以给某一个元素的同一个行为绑定多个不同的方法 //实例 1 obj.addEven

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue 应用,都是由一个一个的小组件拼装而成的.正是由于vue组件如此重要,所以vue的生态中,也非常多的UI组件库,其中最著名的非Element-UI莫属,里面有非常多的封装完善的组件提供给我们使用,大大的增强了我们的开发效率.那么,这些UI框架的组件,究竟是如何封装的呢?如何动手从零开始封装自己的组件呢?接下来,我们就从最简单的一个Button的组件封装说起.如下,是Element-UI中的按钮

JS事件-鼠标滚轮事件

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

封装一个UIImageView的点击事件

封装一个UIImageView的点击事件像UIButton那样的点击事件 首先 创建一个类 继承自UIImageView  在类里实现一个点击的方法 - (void)addTarget:(id)target action:(SEL)action 在这个方法里把userInteractionEnabled=YES ; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 直接上代码  简单的封装 更易于原来加手势的那种点击

鼠标滚轮事件的监听

鼠标滚轮事件的监听原理:判断鼠标滚轮的滚动获取一个值,根据这个值判断滚动的方向.分析:首先,判断滚轮方向.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

JavaScript封装一个实用的select控件

最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样式的处理 2.对点击和hover事件的处理 3.change事件发送请求的处理 我们先看jsp的展示代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&

JS事件(7)——事件类型——鼠标与滚轮事件

鼠标与滚轮事件 鼠标事件 “DOM3级事件”中定义了9个鼠标事件. click:在单击主鼠标按钮(一般是左键)或者按下回车时触发:这意味着onclick事件处理程序既可以通过鼠标也可以通过键盘执行. dbclick:双击主鼠标按钮(一般是左键)或者按下回车键时触发. mousedown:按下任意鼠标按钮时触发:不能通过键盘触发. mouseup:释放鼠标按钮时触发:不能通过键盘触发. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发:这个事件不冒泡,而且光标移动到元素的后代

JS滚轮事件(mousewheel/DOMMouseScroll)了解

已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是