JavaScript常见兼容问题解决
JS兼容问题
//事件对象的获取
document.onclick = function(e){
var _e = window.event || e;
}
document.onkeydown = function(event){
var code = event.keyCode || event.which; //兼容性问题
alert(event.which); // <IE9不支持
}
//事件委托
list.onclick = function(e){
var _e = window.event||e;
var _t = _e.target||_e.srcElement;//事件委托
if(_t.tagName.toLowerCase()=="li"){
alert(_t.innerHTML)
}
}
btn.onclick = function(e){
var _e = window.event || e;
//_e.target 代表的是按钮的节点对象和btn一样
var _t = _e.target||_e.srcElement;
console.log(_t.id)
}
//屏幕的高度
document.body.clientHeight （Chrome）|| document.documentElement.clientHeight（IE、FF）
//阻止事件冒泡（前提是获取事件对象_e）
if(_e.stopPropagation){
_e.stopPropagation();
}else{
_e.cancelBubble = true;
}
什么时候用阻止事件冒泡？
例如：document上有A事件，div有B事件，div里面的span有C事件，如果不给span和div加阻止事件冒泡的话，点击span时就会触发到div的B事件、document的A事件，当点击span时不想触发div和document的事件就要加上阻止事件冒泡，div也是一样的道理。
//阻止默认行为
if(_e.preventDefault){ //标准处理方式
_e.preventDefault();
}else{ //Ie处理方式
_e.returnValue = false;
}
alert(); 鼠标右击；submit；a链接
/*
事件监听绑定事件兼容处理
参数
objNode 事件目标
eventName 事件名称 如：click mouseenter
fn 事件处理程序 函数
*/
function on(objNode,eventName,fn){
if(objNode.addEventListener){ //标准模式
objNode.addEventListener(eventName,fn);
}else{ //IE8及以下模式
objNode.attachEvent("on"+eventName,fn);
}
}
function out(target,eventName,fn){
if(target.removeEventListener){
target.removeEventListener(eventName,fn);
}else{
target.detachEvent("on"+eventName,fn)
}
}
/*
事件监听绑定事件兼容处理
参数
objNode 事件目标
eventName 事件名称 如：click mouseenter
fn 事件处理程序 函数
*/
function on(objNode,eventName,fn){
if(objNode.addEventListener){ //标准模式
objNode.addEventListener(eventName,fn);
}else{//IE8及以下模式
objNode.attachEvent("on"+eventName,fn);
}
}
function handler(e){
//console.log(e)
//滚轮方向 事件对象.wheelDelta 120↑ -120↓ 非火狐
//滚轮方向 事件对象.detail -3↑ 3↓ 火狐
if(e.wheelDelta==120||e.detail==-3){
alert("向上");
}else{
alert("向下")
}
}
on(document,"DOMMouseScroll",handler) //Firefox
on(document,"mousewheel",handler) //非Firefox
/*
获取任意【节点对象】的任意的样式【属性】的值
dom 节点对象
pName 样式属性名 "aaa"
*/
function getStyleValue(dom, pName) {
if (window.getComputedStyle) { //标准模式
return window.getComputedStyle(dom, null)[pName];
} else { //IE低版本
//dom.currentStyle 样式对象
return dom.currentStyle[pName];
}
}
//获取css样式函数以及透明度兼容
function getStyle(obj, attr){
//获取对象obj的属性attr的值
//大小，宽高，位移
if(obj.currentStyle){ //IE浏览器的一个属性，返回的是CSS样式对象
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr]; //获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
}
}
function getStyleOpacity(obj, attr){
var iCur = 0;
//去掉样式的单位
if(attr == "opacity"){
iCur = parseFloat(getStyle(obj, attr)) * 100;
}else{
iCur = parseFloat(getStyle(obj, attr))
}
}
//ajax创建请求数据
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //标准
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
}
