详解js几个绕不开的事件兼容写法
程序员文章站
2022-04-29 08:25:36
本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下:
1、键盘事件 keycode 兼容性写法
var inp = document.gete...
本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下:
1、键盘事件 keycode 兼容性写法
var inp = document.getelementbyid('inp') var result = document.getelementbyid('result') function getkeycode(e) { e = e ? e : (window.event ? window.event : "") return e.keycode ? e.keycode : e.which } inp.onkeypress = function(e) { result.innerhtml = getkeycode(e) }
2、求窗口大小的兼容写法
当我们获取滚动条滚动距离时:
ie,chrome: document.body.scrolltop
ff: document.documentelement.scrolltop
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线) // 1600 * 525 var client_w = document.documentelement.clientwidth || document.body.clientwidth; var client_h = document.documentelement.clientheight || document.body.clientheight; // 网页内容实际宽高(包括工具栏和滚动条等边线) // 1600 * 8 var scroll_w = document.documentelement.scrollwidth || document.body.scrollwidth; var scroll_h = document.documentelement.scrollheight || document.body.scrollheight; // 网页内容实际宽高 (不包括工具栏和滚动条等边线) // 1600 * 8 var offset_w = document.documentelement.offsetwidth || document.body.offsetwidth; var offset_h = document.documentelement.offsetheight || document.body.offsetheight; // 滚动的高度 var scroll_top = document.documentelement.scrolltop||document.body.scrolltop;
3、dom 事件处理程序的兼容写法(能力检测)
var eventshiv = { // event兼容 getevent: function(event) { return event ? event : window.event; }, // type兼容 gettype: function(event) { return event.type; }, // target兼容 gettarget: function(event) { return event.target ? event.target : event.srcelem; }, // 添加事件句柄 addhandler: function(elem, type, listener) { if (elem.addeventlistener) { elem.addeventlistener(type, listener, false); } else if (elem.attachevent) { elem.attachevent('on' + type, listener); } else { // 在这里由于.与'on'字符串不能链接,只能用 [] elem['on' + type] = listener; } }, // 移除事件句柄 removehandler: function(elem, type, listener) { if (elem.removeeventlistener) { elem.removeeventlistener(type, listener, false); } else if (elem.detachevent) { elem.detachevent('on' + type, listener); } else { elem['on' + type] = null; } }, // 添加事件代理 addagent: function (elem, type, agent, listener) { elem.addeventlistener(type, function (e) { if (e.target.matches(agent)) { listener.call(e.target, e); // this 指向 e.target } }); }, // 取消默认行为 preventdefault: function(event) { if (event.preventdefault) { event.preventdefault(); } else { event.returnvalue = false; } }, // 阻止事件冒泡 stoppropagation: function(event) { if (event.stoppropagation) { event.stoppropagation(); } else { event.cancelbubble = true; } } };
4、解决 ie9 以下浏览器不能使用 opacity
opacity: 0.5; filter: alpha(opacity = 50); filter: progid:dximagetransform.microsoft.alpha(style = 0, opacity = 50);
5、为一个元素绑定两个相同事件:attachevent/attacheventlister 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
ie8以下用: attachevent('事件名',fn);
ff,chrome,ie9-10用: attacheventlister('事件名',fn,false);
function myaddevent(obj,ev,fn){ if(obj.attachevent){ //ie8以下 obj.attachevent('on'+ev,fn); }else{ //ff,chrome,ie9-10 obj.attacheventlister(ev,fn,false); } }
6、获取元素的非行间样式值
function getstyle(object,ocss) { if (object.currentstyle) { return object.currentstyle[ocss];//ie }else{ return getcomputedstyle(object,null)[ocss];//除了ie } }
7、节点加载
//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同 //感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。 document.addeventlistener('domcontentloaded',function ( ){},false);//dom加载完成。好像除ie6-8都可以.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 盘点各式佳肴之西葫芦炒肉片的做法