脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery.event

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

 更新时间：2013年12月18日 10:08:36   作者：  
jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断

介绍之前先介绍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://www.jb51.net]").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属性。
该方法的作用是指向原始的事件对象。

您可能感兴趣的文章:

相关文章

  • 如何在MVC应用程序中使用Jquery

    如何在MVC应用程序中使用Jquery

    这篇文章主要介绍了如何在MVC应用程序中使用Jquery，并附上示例，给需要的小伙伴们参考下吧
    2014-11-11
  • JSONP 跨域访问代理API-yahooapis实现代码

    JSONP 跨域访问代理API-yahooapis实现代码

    介绍一个JSONP 跨域访问代理API-yahooapis,需要的朋友可以参考下
    2012-12-12
  • jquery性能优化高级技巧

    jquery性能优化高级技巧

    jquery性能优化做好，速度也很快，那么如何提高jquery性能呢，本篇文章给大家介绍jquery性能优化高级技巧，需要的朋友可以参考下
    2015-08-08
  • jquery 选择器部分整理

    jquery 选择器部分整理

    jquery 选择器，jquery学习与开发中需要用的到，大家可以收藏下，另外可以看下本站提供的学习jquery的资料。
    2009-10-10
  • 浅析jquery的作用与优势

    浅析jquery的作用与优势

    这篇文章主要是对jquery的作用与优势进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • jQuery实现 RadioButton做必选校验功能

    jQuery实现 RadioButton做必选校验功能

    这篇文章主要介绍了jQuery实现 RadioButton做必选校验功能的相关资料,需要的朋友可以参考下
    2017-06-06
  • jquery实现的放大镜效果示例

    jquery实现的放大镜效果示例

    这篇文章主要介绍了jquery实现的放大镜效果,结合实例形式分析了jQuery放大镜插件shoplistxq.js的定义与使用相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • jQuery Ajax Post 回调函数不执行问题的解决方法

    jQuery Ajax Post 回调函数不执行问题的解决方法

    本文是小编给大家带来的jQuery Ajax Post 回调函数不执行的原因及解决方法，在本文最下面还给大家附加jquery Ajax 不执行回调函数success的原因，这两个问题都非常多见，感兴趣的朋友一起看下吧
    2016-08-08
  • jQuery中使用Ajax获取JSON格式数据示例代码

    jQuery中使用Ajax获取JSON格式数据示例代码

    有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现，下面有个不错的示例，需要的朋友可以参考下
    2013-11-11
  • jQuery position() 函数详解以及jQuery中position函数的应用

    jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效，通过本文给大家介绍jQuery position() 函数详解以及jQuery中position函数的应用，感兴趣的朋友一起学习吧
    2015-12-12

最新评论