event事件問題
IE中有window.event,而火狐中沒有
function onclick(event){
var e=event || window.event;
var mouseX=e.clientX;//鼠標(biāo)X軸的坐標(biāo)
var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
}
獲取元素的非行間樣式值
function getstyle(obj, obj_css){
if(obj.currentStyle){
return obj.currentStyle[obj_css] //ie
}else{
return getComputedStyle(obj,null)[obj_css] //除了ie
}
}
獲取自定義屬性問題
IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性贴妻，也可以使用getAttribute() 獲取自定義屬性切油；Firefox下，只能使用getAttribute() 獲取自定義屬性
解決方法:統(tǒng)一用getAttribute()獲取屬性
設(shè)置監(jiān)聽事件
function addEvent(obj, type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false) //非ie
}else{
obj.attachEvent("on"+type,fn) //ie
}
}
//解除事件綁定
function removeEvent(obj.type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false) //非ie
}else{
obj.detachEvent("on"+type,fn) //ie
}
}
補(bǔ)充說明： attachEvent只在ie9及其以下才能使用,在ie9及其以上統(tǒng)一使用了 addEventListener
阻止事件冒泡
function do(event){
var e=event || window.event;
if(e.stopPropagation){
e.stopPropagation() // 非ie
}else{
e.cancelBubble=true // 從ie5到edge都要這么寫
}
}
阻止默認(rèn)事件
function stopDefault( e ) {
//阻止默認(rèn)瀏覽器動(dòng)作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
else
window.event.returnValue = false;
return false;
}
關(guān)于event事件中target問題
function do(event){
var e=event || window.event;
var target =e.target || e.srcElement //后面為ie
)
補(bǔ)充說明：在ie9及其以上的時(shí)候名惩，event屬性存在,并且區(qū)別是:
event： srcElement target cancleBuble currentTarget defaultPrevent
window.event： srcElement
鼠標(biāo)滾輪事件
// 火狐滾輪事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail) //前進(jìn)-3 后退 3
}澎胡，false)
// IE滾輪事件
document.onmousewheel=function(event){
alert(event.detail) //前滾：120，后滾：-120
}
鼠標(biāo)當(dāng)前坐標(biāo)
IE: event.offsetX 和 event.offsetY
FF: event.layerX 和 event.layerY
事件委托
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
窗體寬高
var winW=document.body.clientWidth || document.ducumentElement.clientHeight
//以上為不包括邊框的寬高娩鹉，如果是offsetWidth或者offsetHeight的話包括邊框
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;
//整個(gè)網(wǎng)頁的寬度
var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的寬
var screenX=window.screenLeft;//瀏覽器窗口相對(duì)于屏幕的x坐標(biāo)（除了FireFox）
var screenXX=window.screenX;//FireFox相對(duì)于屏幕的X坐標(biāo)
var screenY=window.screenTop;//瀏覽器窗口相對(duì)于屏幕的y坐標(biāo)（除了FireFox）
var screenYY=window.screenY;//FireFox相對(duì)于屏幕的y坐標(biāo)
一圖解析
獲取元素的非行間樣式值
//獲取元素的非行間樣式值
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
元素到瀏覽器邊緣的距離
//在這里加個(gè)元素到瀏覽器邊緣的距離攻谁，很實(shí)用
function offsetTL(obj){//獲取元素內(nèi)容距離瀏覽器邊框的距離（含邊框）
var ofL=0,ofT=0;
while(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return{left:ofL,top:ofT};
}
