js兼容性总结
Posted ypwei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js兼容性总结相关的知识，希望对你有一定的参考价值。
1:event event||window.event;
2:event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
hake: event.x?event.x:event.pageX
3:firefox与IE的父元素(parentElement)的区别
说明：IE：obj.parentElement； firefox：obj.parentNode
hake: 三目运算
4:.input.type属性问题
说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写；
hake：显示隐藏
5:event.srcElement问题
说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
hake:三目的运算 event.srcElement ?event.srcElement : event.target
6:.innerText在IE中能正常工作，但在FireFox中却不行.需用textContent；
hake:三木
8:事件监听
addHandler：function(element,type,handler){
if(element.addEventListener){//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
}else if (element.attachEvent){//检测是否为IE级方法
element.attachEvent("on" + type, handler);
} else {//检测是否为DOM0级方法
element["on" + type] = handler;
}
}
9:移除事件监听
removeHandler：function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
10:获取事件对象目标的兼容性写法
getTarget: function(event){
return event.target || event.srcElement;
}
11:阻止浏览器默认行为
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
12:阻止事件冒泡
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
12:访问剪贴板中的数据
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
13:设置剪贴板中的数据
setClipboardText: function(event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
14:获取鼠标选中的文字
if (window.getSelection) {//一般浏览器
userSelection = window.getSelection();}
else if (document.selection) {//IE浏览器、Opera
userSelection = document.selection.createRange();}userSelection.toString();
}
14:获取:scrollTop
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
15:获取行内样式
function getStyle(dom, styleName){
return dom.currentStyle?
dom.currentStyle[styleName]
getComputedStyle(dom)[styleName];
}
16:DOM节点相关，主要兼容IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
17: oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table
18: <body onselectstart="return false"> 取消选取、防止复制
19: onpaste="return false" 不准粘贴
20: oncopy="return false;" oncut="return false;" 防止复制
21: <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标
22: <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标
23: <input style="ime-mode:disabled"> 关闭输入法
24: 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">
25:页面进入和退出的特效
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
26:使用html5自带的 input ，纯html5，并且不涉及到js ，可以实现移动端调用手机摄像头。
<label>照相机</label>
<input type="file" id=‘image‘ accept="image/*" capture=‘camera‘>
<br>
<label>摄像机</label>
<input type="file" id=‘video‘ accept="video/*" capture=‘camcorder‘>
var file = document.querySelector(‘input‘);
if (getios()) {
file.removeAttribute("capture");
}
function getIos() {
var ua=navigator.userAgent.toLowerCase();
if (ua.match(/iPhone\sOS/i) == "iphone os") {
return true;
} else {
return false;
}
}
以上是关于js兼容性总结的主要内容，如果未能解决你的问题，请参考以下文章