js二级事件模型的处理细节
一、纠正网络上的一个误传--“IE不支持事件捕获”
可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在命中元素上事件的触发的顺序会稍有区别,参见下条。
二、在命中元素上冒泡和捕获的执行顺序
命中元素上事件冒泡和捕获的触发顺序在不同浏览器中的顺序稍有区别,在IE6-8中是先触发捕获再触发冒泡,在IE9及以上、chrome、firefox等浏览器是先触发冒泡再触发捕获
三、事件的浏览器兼容方面的东西
浏览器\区别 | 添加监听 | 事件名 | 移除监听 | 仅阻止事件冒泡 |
IE6-8 | attachEvent | 标准事件名+on,如onclick、onmouseover | detachEvent | e = e || window.event;e.cancelBubble = true; |
IE9及以上,chrome等 | addEventListener | 事件名,如click、mouseover | removeEventListener | e = e || window.event;e.stopPropagation(); |
四、事件中的元素关系
获取触发事件监听函数的的元素可以用下面的方法做到浏览器兼容
var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;
mouseover、mouseout、mousemove等事件还支持fromElement与toElement(IE6也同样支持),表示鼠标从一元素移到另一元素。鼠标的移入移出存在边界整齐对其的情况,此情况下事件会直接跳过那些被遮盖的元素,直接反应鼠标的移入移出元素。另外一个需要注意的问题是IE6下的body会紧缩,所以从页面最边缘向内移动时后出现从HTML移入的情况,如需做边界处理请注意此点。在低级IE下会存在事件下漏的问题,参见第六条。
五、事件中的鼠标位置
用鼠标的位置在应用中做一些判断是一件效率较低且使用场景很局限的事,但是在特定的场景下却又无可奈何,既然我们改变不了浏览器与应用场景那就费点功夫搞明白怎么用现有的这点资源来做一些事情,正所谓人生的意义不在于拿一手好牌,而在于打好一手烂牌。
chrome一共提供了7组与位置有关的信息:clientX、layerX、offsetX、pageX、screenX、webkitMovementX、x;IE的事件提供的位置参数我就不说了,我们以chrome事件的位置参数为标准,用IE固有的属性来模仿。
screenX:鼠标在显示屏幕上的坐标;
clientX:鼠标在页面显示区域的坐标。
offsetX:鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便。
注:以上几个都是各浏览器通用的。
pageX:标准浏览器特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。
layerX:标准浏览器特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
x:IE特有,跟layerX一个效果,可作为layerX的直接替换属性,现代浏览器的现行版本一景支持了该属性。
webkitMovementX:鼠标的移动距离,主要用在一些3D场景中,比如第一视角的游戏,需要计算用户鼠标的移动距离来反馈画面。下面来自mozilla官网的API
This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.
For example, you can create apps that let your users control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. This kind of mouse input is quite handy for viewing maps, satellite imagery, or first-person scenes (such as in a game or an immersive video).
当然老式浏览器就不大算指望他了,下面是一段兼容代码:
document.addEventListener("mousemove", function(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0; // Print the mouse movement delta values
console.log("movementX=" + movementX, "movementY=" + movementY);
}, false);
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。
六、IE的事件下漏解决方案
在低级IE下当两个元素重叠且不设置背景时,鼠标事件会从上面一层的元素漏到下面的元素上。解决此问题是设置背景,如果页面有半透明效果那就需要额外加一个元素设置背景再将其透明度用CSS设为全透明。
相关文章:
之前写的一篇:二级事件模型
别人的一篇优秀博文:浏览器中关于事件的那点事儿
js二级事件模型的处理细节的更多相关文章
- JS的事件模型
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...
- js实现事件模型bind与trigger
function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Em ...
- js 事件模型详解
把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...
- js的事件学习笔记
目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- JS事件模型小结
三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
- js事件模型与自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...
随机推荐
- 2016年中国大学生程序设计竞赛(杭州)1006 Four Operations
Four Operations Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- JSON、JSONP、Ajax的区别
什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...
- canvas绘制旋转图形
将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...
- 手工搭建基于ABP的框架(2) - 访问数据库
为了防止不提供原网址的转载,特在这里加上原文链接: http://www.cnblogs.com/skabyy/p/7517397.html 本篇我们实现数据库的访问.我们将实现两种数据库访问方法来访 ...
- JMeter基础教程3:脚本录制篇
对于一些JMeter初学者来说,录制脚本可能是最容易掌握的技能之一.虽然我不建议录制性能脚本(因为录制的脚本比较混乱,必须要通过二次处理才可正常使用),但有时做总比不做要好,是吧?下面我们详细介绍使用 ...
- RestSharp使用总结
RestSharp是一个轻量的,不依赖任何第三方的组件或者类库的Http的组件.RestSharp具有以下的优点: 1.支持.NET 3.5+,Silverlight 4, Windows Pho ...
- 设计模式-模板方法模式(Head First)
参考书籍:Head First设计模式 什么是模板方法模式 定义:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 怎 ...
- flex布局元素操作详情
之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局 父元素: flex-direction: row row-reverse column column-reve ...
- 向maven中添加本地jar包
<dependency> <groupId>org.csource</groupId> <artifactId>fastdfs-client-java& ...
- angularJS的一些用法
AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...