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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
浅析VUE防抖与节流
Nov 24 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
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
原生js二级联动效果
2017/06/20 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python 可爱的大小写
2008/09/06 Python
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python递归函数用法详解
2020/10/26 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
班会关于环保演讲稿
2013/12/29 职场文书
教导处工作制度
2014/01/18 职场文书
2014庆六一活动方案
2014/03/02 职场文书
农业项目建议书
2014/08/25 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL