zoukankan      html  css  js  c++  java
  • JS中兼容问题的汇总

      获取非行内样式的兼容方式

    function getStyle(obj,attr){  //获取非行间样式,obj是对象,attr是值
         if(obj.currentStyle){                //针对ie获取非行间样式
              return obj.currentStyle[attr];
          }else{
              return getComputedStyle(obj,false)[attr];   //针对非ie
            }
        }

      获取事件对象的兼容方式

    document.onclick=function(eve){
            var e=eve||window.event;
            console.log(e);
        }

      事件冒泡的兼容方法

    function stopBubble(e){
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;//兼容ie
            }
        }

      阻止浏览器默认行为的兼容方法

        if( e.preventDefault ){
            e.preventDefault();
        }else{
            window.event.returnValue = false;//ie
        }

      监听事件的设置和移除的兼容方式

    1.封装成对象的方式
        var EventUtil={
            addHandler:function(DOM,EventType,fn){
                if(DOM.addEventListener){
                    DOM.addEventListener(EventType,fn,false);
                }else if(DOM.attachEvent){
                    DOM.attachEvent('on'+EventType,fn)
                }else{
                    DOM['on'+EventType]=fn
                }
            },
            removeHandler:function(DOM,EventType,fn){
                if(DOM.removeEventListener){
                    DOM.removeEventListener(EventType,fn,false)
                }else if(DOM.detachEvent){
                    DOM.detachEvent('on'+EventType,fn)
                }else{
                    DOM['on'+EventType]=null;
                }
            }
        }
    
    
    2.封装成两个函数的方式
        function addEvent(obj,inci,back){
            if(obj.addEventListener){
                obj.addEventListener(inci,back);
            }else if(obj.attachEvent){
                obj.attachEvent("on" + inci,back);
            }else{
                obj["on"+inci] = back;
            }
        }
              
        function removeEvent(obj,inci,back){
            if(obj.removeEventListener){
                obj.removeEventListener(inci,back,false);
            }else if(obj.detachEvent){
                obj.detachEvent("on" + inci,back);
            }else{
                obj["on"+inci] = null;
            }
        }

      事件委托的兼容方法

    var oul = document.querySelector("ul")
        oul.onclick = function(eve){
            var e = eve || window.event;
    
            var t = e.target || e.srcElement;
    
            if(t.getAttribute("abc") == "l"){
                console.log(e.target.innerHTML)
            }
            
        }

      键盘事件的兼容方法

    var eve = eve||window.event;
    var keyC = eve.keyCode||eve.which;

      以上是本人在学习js过程中遇见的几个兼容方式的汇总,如果哪里有错误希望大家指出,谢谢。

  • 相关阅读:
    【ASP.NET】website转webapplication
    【.net】ASP.Net设置和取消设置web项目起始页
    【.net】“Newtonsoft.Json”已拥有为“Microsoft.CSharp”定义的依赖项。
    snmp简单使用
    saltstack系列2之zabbix-agent自动化部署
    saltstack系列1之salt-api配置与使用
    python06 深浅拷贝原理
    python05
    level 1 -- unit 4 -- where 引导的疑问句
    level1 -- unit 3
  • 原文地址:https://www.cnblogs.com/lxylhj/p/11479827.html
Copyright © 2011-2022 走看看