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 滑入滑出效果实现代码
Mar 27 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
canvas绘制的直线动画
Jan 23 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
JS轮播图的实现方法2
Aug 25 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
PHP 危险函数解释 分析
2009/04/22 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
javascript 写类方式之三
2009/07/05 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
vant实现购物车功能
2020/06/29 Javascript
Python验证码识别的方法
2015/07/10 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
jupyter notebook清除输出方式
2020/04/10 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
物流司机岗位职责
2013/12/28 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
文明礼仪主题班会
2015/08/13 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers