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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vue如何进行动画的封装
Sep 26 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
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
下载文件的点击数回填
2006/10/09 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JS作用域链详解
2017/06/26 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue组件系列之TagsInput详解
2020/05/14 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
方正Java笔试题
2014/07/03 面试题
节约电力资源的建议书
2014/03/12 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
经济国贸专业求职信
2014/06/18 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
计划生育工作汇报
2014/10/28 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
HTML常用标签超详细整理
2022/03/19 HTML / CSS