关于考虑浏览器兼容性时间的工具demo

        //支持跨浏览器的添加事件。
        var btn = document.getElementById("btn");
        function showMes() {
            alert("hello world!");
        }

        var eventUtil = {
            addHander:function(element,type,hander) {
                //判断是否是除IE以外的DOM2级操作
                if (element.addEventListener) {
                    element.addEventListener(type,hander,false);
                } else if(element.attachEvent){
                    element.attachEvent("on"+type,hander);
                }else{
                    element["on"+type] = hander;
                }
            },
            removeHander:function(element,type,hander) {
                //判断是否是除IE以外的DOM2级操作
                if (element.removeEventListener) {
                    element.removeEventListener(type,hander,false);
                } else if(element.detachEvent){
                    element.detachEvent("on"+type,hander);
                }else{
                    element["on"+type] = null;
                }
            },
            getEvent:function(event) {
                return event?event:window.event;
            },
            getType:function(event) {
                return event.type;
            },
            getElement: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.cancleBubble = true;
                }
            }
        }
时间: 2024-10-29 02:47:35

关于考虑浏览器兼容性时间的工具demo的相关文章

12款很棒的浏览器兼容性测试工具推荐

对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Superpreview 这是为微软自己发布的跨浏览器测试工具,您可以同时查看您的网页在多个

Web浏览器兼容性测试工具如何选择

对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让我们一起看看这些很棒的工具吧. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Super

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

IE浏览器兼容性模式

最近支持公司的一个内部业务管理系统,系统是基于jQuery来实现:用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统,真是相当不爽(相信用过MVVM框架的跟我是相同的感受):更为憋屈的是,到了这个年代,IE的亲爹微软都放弃支持IE6-10了,系统尽然还只支持使用IE浏览器(运营电脑安装都是IE8浏览器,所以大部分只管IE8),其他高级浏览器不被支持(当然这是由于系统使用了基于IE的一些插件导致). 但是话又说回来,但是在支持系统的开发过程中,经常看到X-UA-Compatib

浏览器兼容性:Javascript

1.event IE9以下不支持直接获取event对象,所以需要写兼容: var event = event?event:window.event; IE8以下不支持event.target,但是可以通过event.srcElement来兼容: var eventTarget = event.srcElement?event.srcElement:event.target; 2.document.getElementsByClassName("...") IE8以下不支持,暂时没有解决

浏览器兼容性问题汇总

# 浏览器兼容性问题汇总 ## 问题1 ### first-child ## <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div p:first-child { color: red; } </style> </head> <

有关CSS浏览器兼容性问题

有关CSS的浏览器兼容性问题 今天有时间,就简单总结了下CSS的浏览器兼容相关的问题,与大家共享... 1. css中的width和padding 在IE7和火狐浏览器中width宽度不包括padding,在Ie6中包括padding. 2. innerText在IE中能正常工作,但在FireFox中却不行.   需用textContent.解决方法:if(navigator.appName.indexOf("Explorer")   >   -1){        docume

浏览器兼容性调试 (360 , IE , Chrome)

浏览器兼容性问题,一直是一个比较头疼的事情,各家有各家的标准,这就苦了广大 debuger 们. 一.360 目前,360安全浏览器的使用者已经越来越多,而且从微软宣布和360合作,对xp进行维护后,更是有不可阻挡的态势.那带来的问题,就是我们需要去适配360. 360采用双核机制,包括webkit 和 IE内核,在安装过程中,会检测本地IE版本,如果高于IE8,则不安装内置IE8. 同时,360帮助也给出了一个解决办法,详情参见:点此查看.从这份帮助文档来看,360还是有一定的野心的,呵呵.

浏览器兼容性问题积累

1.一个块级元素,设置了float left or right,如果又对它设置水平margin值,如margin-left margin-right,在IE6下间距会比设的这个值大. 解决方案:该块级元素加hack: _display:inline; demo: <!DOCTYPE html> <html> <head> <title></title> <style> *{ margin: 0; padding: 0; } #test