对事件的常用属性进行了封装,下面使用jquery控

作者:mgm娱乐
$ { $.each { var maxwidth = 520; if  > maxwidth) { var oldwidth = $; var oldheight = $; var newheight = maxwidth/oldwidth*oldheight; $.css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); $.attr; $.click{window.open}); } }); }); 

介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!

如果上面的代码不能执行,可以使用下面的代码:

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。

$.load {$.each { var maxwidth = 600; if  > maxwidth) { var oldwidth = $; var oldheight = $; var newheight = maxwidth/oldwidth*oldheight; $.css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); $.attr; $.click{window.open}); } }); });

1.event.type属性 该方法作用是可以获取到时间的类型

通过css还有一种方法兼容IE6能让图片在超过规定的宽度时自动按比例缩小,但该写法不符合W3C标准。代码如下:

复制代码 代码如下:

.cate img{ max-width: 600px; height:auto; width:expression(this.width > 600 ? "600px" : this.width); }

$("a").click(function(event){
    alert(event.type); //获取时间类型
    return false; //阻止链接跳转
})

所以在做到尽量兼容IE和其他浏览器以及符合W3C的标准下就通过js来控制图片的宽度了,下面使用jquery控制图片显示时的最大宽度,主代码如下:

以上代码运行后会返回:“click”。

$.load { $.each { var maxwidth = 600; if  > maxwidth) { $; } });});

2.event.preventDefault()方法 该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

代码很简单,就是cate样式下的所以img的最大宽度只能为600px。.each,each在这里是对指定的图片集合对象逐一调用下面的方法。这种jquery方法在IE6及以上浏览器和chrome及Firefox上都能实现控制图片显示时的最大宽度。

3.event.stopPropagation()方法 该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4.event.target属性 event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

复制代码 代码如下:

$("a[href=//www.jb51.net]").click(function(event){
    alert(event.target.href); //获取触发事件的<a>元素的href属性值
    alert(event.target.tagName); //获取触发事件的元素的标签名称
    return false; //阻止链接跳转})

本文由mgm娱乐发布,转载请注明来源

关键词: