addEventListener以及滑轮滑动事件的应用
addEventListener用于向元素添加事件,而其适用于较新版的IE浏览器(如IE9),对于IE6/7/8来说,应该用attachEvent
下面的代码即为向<img>元素添加事件
var myimage = document.getElementById("img");
if (myimage.addEventListener) {
//addEventListener适用于版本较新的IE浏览器 ,如IE9以及火狐浏览器,
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox浏览器使用的滚轮事件是 DOMMouseScroll
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
//attachEvent适用于旧的 IE浏览器,IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);
下面说一下addEventListener的参数,其共有三个参数:
1:所添加的事件名称(需要注意的是,对于addEventListener所添加的事件不需要加on,而对于attachEvent需要添上on)。
2:当第一个参数的事件发生后调用的函数。
3:第三个参数为布尔值类型,当第三个参数设置为true就在捕获过程中执行处理函数,反之就在冒泡过程中执行处理函数。
对于滑轮滑动事件来说,IE等浏览器所使用的事件名称是mousewheel而火狐浏览器使用的是DOMMouseScroll。
下面的方法用于当滑轮向上向下滑动时,分别使图片放大以及缩小:
function MouseWheelHandler(e) {
var e = window.event;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta)));
myimage.style.width = Math.max(727, myimage.width + (30 * delta)) + "px";
myimage.style.height = Math.max(500, myimage.height + (30 * delta)) + "px";
return false;
}
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对onmouseover 和 onmouseout 事件有意义;还有上面的代码中,wheelDelta只对mousewheel事件有意义。
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中对于wheelDelta正数表示为向上,负数表示向下,而对于detail则相反。
addEventListener以及滑轮滑动事件的应用的更多相关文章
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...
- 移动端H5开发 (滑动事件)
最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...
- 关于js的addEventListener 和一些常用事件
element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- android 解决ListView点击与滑动事件冲突
如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面 ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- Android判断Touch为滑动事件还是操作控件
Android判断Touch为滑动事件还是操作控件 因为在项目中要判断WebView是否处于滚动状态,但它不像ListView有onScrollStateChanged方法来监听,要实现就得手动监听它 ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
随机推荐
- centos install jdk
=========== 查询jdk版本 ===========yum search jdk =========== 安装jdk 64位开发版 ===========yum -y install jav ...
- LINQ解析
Linq 是什么? Linq是Language Integrated Query的缩写,即“语言集成查询“的意思,Linq的提出就是为了提供一种跨各种数据源统一查询方式,主要包含四种组件:Linq t ...
- 在idea中用tomcat远程部署调试
适用于生产环境下的调试. 1.catalina配置 在服务器的bin下创建setenv.sh,内容如下 1099是jmx,最后是服务器ip 2.启动tomcat ./catalina.sh jpda ...
- ES6--闭包数组i的值与var的作用域理解
var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10 变 ...
- gdb pretty printer for STL debug in Linux
Check your gcc version. If it is less than 4.7, you need use another printer.py file. Get the file f ...
- protobuf example make backup
# See README.txt. .PHONY: all cpp java python clean all: cpp #java python cpp: add_person_cpp list_p ...
- 微信小程序中对于变量的定义
在页面对应的js文件中: page顶部使用let定义变量,这是定义的全局变量,在当前脚本页面,任何函数中都可以直接使用变量名调用.如果做修改,就直接使用变量等于要更改的值. 使用const定义变量,就 ...
- linq查询数值为null的问题以及数据表的关联计算问题
说明:下面实例都是我进行项目开发时的真实部分代码,毫无保留 一.数据表的关联计算 //把当前年度的分差计算出来,建立两个关联的数据表 try { using(TransactionScope scop ...
- ajax请求本地文件
这是一个小随笔,真的很简短! 主要入坑点有两个 一.Chrome浏览器默认不支持ajax读取本地文件 解决:1.关闭所有Chrome网页 2.右击Chrome浏览器,打开“属性” 3.弹出属性 ...
- HTML DOM 属性
innerHTML 属性 获取元素内容的最简单方法是使用 innerHTML 属性. innerHTML 属性对于获取或替换 HTML 元素的内容很有用. 实例 下面的代码获取 id="in ...