JavaScript兼容性試題

 請實現鼠標點擊任意標籤,alert該標籤的名稱(注意兼容性)

function elementName(evt){

          evt = evt|| window.event;

          var selected = evt.target || evt.srcElement;

         alert(selected.tagName);

   }

 寫一個獲取非行間樣式的函數

 
function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; // 火狐
}

設置透明度

function setOpacity(elem, value) {
    elem.filters ? elem.style.filter = 'alpha(opacity=' + value + ')' : elem.style.opacity = value / 100;
}

得到當前視口距離頁面頂部的像素

function getScrollTop(){
    return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
}

得到當前視口距離頁面左邊的像素瀏覽器

function getScrollLeft() {
    return document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft
}

tips:scrollBy(x , y)實現了基於當前位置的相對滑動,而scrollTo( x, y)則是實現了「絕對滑動」函數

IE6斷定

if(!-[1,]) { //IE6       在IE6中[-1,].toString()爲「1,」,‘-’會進行類型轉換(轉成數字類型),-"1,"  爲NaN,因此返回!false  
       
} else{ //非IE6   非IE6中[-1,].toString()爲「1」,‘-’會進行類型轉換(轉成數字類型),-"1"  爲-1,因此返回!true  
  
}  

斷定IE瀏覽器

if(window.VBArray){     //由於VB是微軟發明的,其餘瀏覽器無VBArray,至少可斷定IE 6/7/8/9/10    
  
} else {  
  
}  

獲取鍵盤按下的鍵值

document.onkeypress=function(e){  
    e = e || window.event;  
    e.keyCode || e.which  // 常規瀏覽器 || IE  
}  

阻止事件冒泡

function stopProp(event) {
    event = event || window.event
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;  // 常規瀏覽器 || IE  
}

tips:這裏不可以使用 e.cancelBubble?e.cancelBubble = true : e.stopPropagation()  ,由於 e.cancelBubble 是一個屬性(而非方法),其默認值爲 false spa

阻止瀏覽器默認行爲,如:按標籤連接跳轉 

function preDef(event) {
    event = event || window.event
    event.preventDefault ? e.preventDefault() : e.returnValue = false // 常規瀏覽器 | IE
}

 添加事件監聽

// 懶加載
function addEvent(ele, eventName, func, isCapture) {
    if(ele.attachEvent){
        ele.attachEvent('on' + eventName, func)
        addEvent = function(ele, eventName, func) {
            ele.attachEvent('on' + eventName, func)
        }
    } else {
        ele.addEventListener(eventName, func, !!isCapture)
        addEvent = function(ele, func, !!isCapture){
            ele.addEventListener(eventName, func, !!isCapture)
        }
    }
}
window.addEvent = (function() {
    if(window.attachEvent){
        return function(ele, eventName, func){
            ele.attachEvent('on' + eventName, func)
        }
    } else {
        return function(ele, eventName, func, isCapture){
            ele.addEventListener(eventName, func, isCapture || false)
        }
    }
})();

刪除事件監聽 

//刪除事件
window.removeEvent = (function() {
    if(window.detach){
        return function(ele, eventName, func){
            ele.detach('on' + eventName, func)
        }
    }
    return function(ele, eventName, func, isCapture){
        ele.removeEventListener(eventName, func)
    }
})()
相關文章
相關標籤/搜索