javascript实现跨浏览器编程

1.全屏显示代码和退出全屏代码

function requestFullScreen(element) {
 // 判断各种浏览器，找到正确的方法
 var requestMethod = element.requestFullscreen || //W3C
 element.webkitRequestFullscreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullscreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
function exitFull() {
 // 判断各种浏览器，找到正确的方法
 var exitMethod = document.cancelFullScreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitCancelFullScreen || //FireFox
 document.webkitCancelFullScreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

2.获取浏览器窗口的垂直和水平的滚动距离

/*
功能:实现一个比较通用的获得浏览器窗口的垂直,水平的滚动距离
返回值:对象
*/
function getScrollValue() {
  if(window.pageYOffset >= 0){
    return {
      left:window.pageXOffset,
      top:window.pageYOffset
    }
  }else if(document.documentElement.scrollTop >= 0){
    return {
      left:document.documentElement.scrollLeft,
      top:document.documentElement.scrollTop
    }
  }else {
    return {
      left:document.body.scrollLeft,
      top:document.body.scrollTop
    }
  }
}

3.javaScript实现一些跨浏览器的事件方法

用JavaScript实现事件的绑定,移除,以及一些常用的事件属性获取(跨浏览器的实现)

var EventUtil = {
    on: function(element, type, handler) {/* 添加事件 */
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {//IE  注意：此时事件处理程序会在全局作用域中运行，因此用attachEvent绑定的事件，此时在事件处理函数里的this 等于window，使用时要注意
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    off: 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;
        }
    },

    getEvent: function(event) {/* 返回对event对象的引用 */
        return event ? event : window.event;
    },

    getTarget: function(event) {/* 返回事件的目标 */
        return event.target || event.srcElement;
    },

    preventDefault: function(event) { /* 取消事件的默认行为 */
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event) {/* 阻止事件冒泡 */
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },

    /* mouseover 和mouserout 这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
    getRelatedTarget: function(event) {
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {//IE8 mouserout事件
            return event.toElement;
        } else if (event.fromElement) {//IE8 mouseover事件
            return event.fromElement;
        } else {
            return null;//其他事件
        }
    }
};

调用方法如下:

EventUtil.on(document, "click", function(event){//为document元素绑定click事件
    event = EventUtil.getEvent(event);//获取event事件对象
    alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});