当前位置:小鱼儿玄机二站 > 前端技术 > event包容各浏览器的event详细剖判

event包容各浏览器的event详细剖判

文章作者:前端技术 上传时间:2019-09-03

介绍从前先介绍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=
    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属性。 该措施的功用是指向原始的风云目标。

jQuery.event.fix(event || window.event); 此方法个浏览器的event对象调换为 jQuery.event; 尽管您的事件是因而jQuery方法...

本文由小鱼儿玄机二站发布于前端技术,转载请注明出处:event包容各浏览器的event详细剖判

关键词: