js兼容性写法的收集_event:function()-CSDN博客

本文链接：https://blog.csdn.net/u014388161/article/details/102328071

事件监听绑定考虑IE6-7兼容性

addEvent: function (ele,fn,str) {
  //通过判断调用的方式兼容IE678
  //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
  if(ele.addEventListener){
    //直接调用
    //火狐谷歌IE9+支持addEventListener
    ele.addEventListener(str,fn);
  }else if(ele.attachEvent){
    //IE678支持attachEvent
    ele.attachEvent("on"+str,fn);
  }else{
    //在addEventListener和attachEvent都不存在的情况下，用此代码
    ele["on"+str] = fn;
  }
},
removeEvent: function (ele,fn,str) {
  if(ele.removeEventListener){
    ele.removeEventListener(str,fn);
  }else if(ele.detachEvent){
    ele.detachEvent("on"+str,fn);
  }else{
    ele["on"+str] = null;
  }
}

参考: https://www.cnblogs.com/zp0818/p/9236605.html

获取事件源

function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
}


function whichElement(e){
	var targ;
	if (!e){
		var e=window.event;
	}if (e.target){
		targ=e.target;
	}else if (e.srcElement){
		targ=e.srcElement;
	}
	var tname;
	tname=targ.tagName;
	alert("你点击了一个" + tname + " 元素。");
}
<body onmousedown="whichElement(event)">

参考: https://www.runoob.com/try/try.php?filename=tryjsref_event_srcelement

获取CSS当前属性值

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

阻止冒泡

if(event && event.stopPropagation){
    event.stopPropagation();
}else{
    event.cancelBubble = true;
}

元素被卷去的像素距离-scrollTop&scrollLeft

var x =window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
var y = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

屏幕可视区域的宽高-clientWidth&clientHeight

ps:该属性值会被四舍五入为一个整数。

function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

获取鼠标位置-event.pageX&event.pageY

var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;

禁止文本被选中

ps:实质是选中后取消选中，此句不需赋值，判断有对应方法，直接执行方法。

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

获取第一个子元素

var firstNode = ele.firstElementChild || ele.firstChild;

获取最后一个子元素

var lastNode = ele.lastElementChild || ele.lastChild;

获取下一个兄弟节点

var nextNode = ele.nextElementSibling || ele.nextSibling;

获取上一个兄弟节点

var prevNode = ele.previousElementSibling || ele.previousSibling;

获取指定索引兄弟节点

ps:index表示从0开始的索引。

var node = ele.parentNode.children[index];

获取元素的所有兄弟节点（不包括自身）
function getAllSiblings(ele){
    //定义一个新数组，装所有的兄弟元素，将来返回
    var newArr = [];
    var arr = ele.parentNode.children;
    for(var i=0;i<arr.length;i++){
        //判断，如果不是传递过来的元素本身，那么添加到新数组中。
        if(arr[i]!==ele){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

参考：https://blog.csdn.net/haishangfeie/article/details/77649112

获取键盘编码值的兼容

var code = event.keyCode || event.charCode || event.which;

阻止超链接的默认行为

event.preventDefault ? event.preventDefault() : event.returnValue = false;

参考: https://www.cnblogs.com/arguments/p/10319841.html

chrome下Date和firefox下date的转换

对于字符串格式"01-Apr-2019"在chrome下能通过new Date()直接转化，但是firefox下会直接转化为NaN,经过查找原因，firefox不支持字符串中带‘-’的时间格式。使用字符串替换掉-可以解决