jQuery.event兼容各浏览器的event详细解析


Posted in Javascript onDecember 18, 2013

介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。

1.event.type属性
该方法作用是可以获取到时间的类型

$("a").click(function(event){
    alert(event.type); //获取时间类型
    return false; //阻止链接跳转
})

以上代码运行后会返回:“click”。

2.event.preventDefault()方法
该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

3.event.stopPropagation()方法
该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4.event.target属性
event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

$("a[href=https://3water.com]").click(function(event){
    alert(event.target.href); //获取触发事件的<a>元素的href属性值
    alert(event.target.tagName); //获取触发事件的元素的标签名称
    return false; //阻止链接跳转})

5.event.relatedTarget属性
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。

6.event.pageX/event.pageY属性
该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

$(function() {
    $("a").click(function(event) {
        alert("Current mouse position:" + event.pageX + "," + event.pageY);
        //获取鼠标当前相对于页面的坐标
        return false; //阻止链接跳转
    });
})

7.event.which属性
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。
$(function() {
    $("body").mousedown(function(e) {
        alert(e.which); //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键。
    })
})

以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.

8.event.metaKey属性
针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。

9.event.originalEvent属性。
该方法的作用是指向原始的事件对象。

Javascript 相关文章推荐
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
cookie中的path与domain属性详解
Dec 18 #Javascript
浅析Cookie中的Path与domain
Dec 18 #Javascript
jquery.cookie用法详细解析
Dec 18 #Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实现图书借阅系统
2019/02/20 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
基于Python测试程序是否有错误
2020/05/16 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
家长对老师的感言
2014/03/11 职场文书
药品业务员岗位职责
2014/04/17 职场文书
政治思想表现评语
2014/05/04 职场文书
初中英语教学随笔
2015/08/15 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
python 中yaml文件用法大全
2021/07/04 Python