JS兼容性方法

发表于 更新于 分类于

一、封装type方法

1.分两类  原始值  引用值

2.区分引用值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function type(target) {
  var ret = typeof (target);
  var template = {
    "[object Array]": "array",
    "[object Object]": "object",
    "[object Number]": "number - object",
    "[object Boolean]": "boolean - object",
    "[object String]": "string - object"
  }

  if (target === null) {
    return "null";
  } else if (ret == "object") {
    // 数组 对象 包装类
    var str = Object.prototype.toString.call(target);
    return template[str];
  } else {
    return ret;
  }
}

二、封装兼容性方法，求滚动轮滚动距离getScrollOffset()

1
2
3
4
5
6
7
8
9
10
11
12
13
function getScrollOffset() {
  if (0 && window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset
    }
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scrollLeft,
      y: document.body.scrollTop + document.documentElement.scrollTop
    }
  }
}

三、封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

怪异模式与标准模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getViewportOffset() {
  if (window.innerWidth) {
    return {
      w: window.innerWidth,
      h: window.innerHeight
    }
  } else {
    if (document.compatMode === "BackCompat") {
      return {
        w: document.body.clientWidth,
        h: document.body.clientHeight
      }
    } else {
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      }
    }
  }
}

四、封装兼容性方法，获取元素样式

1
2
3
4
5
6
7
function getStyle(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null)[prop];
  } else {
    return elem.currentStyle[prop];
  }
}

五、封装兼容性的addEvent事件绑定

1
2
3
4
5
6
7
8
9
10
11
function addEvent(elem, type, handle) {
  if (elem.addEventListener) {
    elem.addEventListener(type, handle, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + type, function () {
      handle.call(elem);
    })
  } else {
    elem['on' + type] = handle;
  }
}

六、防止事件冒泡

1
2
3
4
5
6
7
function stopBubble(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

七、阻止默认事件

1
2
3
4
5
6
7
8
9
10
11
12
document.oncontextmenu = function (e) {
  console.log('a');
  cancelHandler(e);
}

function cancelHandler(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

八、加载script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = "text/javascript";

  if (script.readyState) {
    script.onreadystatechange = function () { //IE
      if (script.readyState == "loaded" || script.readyState == "complete") {
        callback();
      }
    }
  } else {
    script.onload = function () {
      callback();
    }
  }
  script.src = url;
  document.head.appendChild(script);
}


loadScript('demo.js', function () {
  test();
});

九、拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>sc</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div style="width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;"></div>
  <script type="text/javascript">
    var div = document.getElementsByTagName('div')[0];

    drag(div);


    function cancelHandler(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    } // 阻止默认事件

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

    function addEvent(elem, type, handle) {
      if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
      } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
          handle.call(elem);
        })
      } else {
        elem['on' + type] = handle;
      }
    }

    function removeEvent(elem, type, handle) {
      if (elem.removeEventListener) {
        elem.removeEventListener(type, handle, false);
      } else if (elem.detachEvent) {
        elem.detachEvent('on' + type, function () {
          handle.call(elem);
        })
      } else {
        elem['on' + type] = null;
      }
    } // IE低版本不可靠，待修改

    function drag(elem) {
      var disX, disY;
      addEvent(elem, 'mousedown', function (e) {
        var event = e || window.event;
        disX = event.clientX - parseInt(elem.style.left);
        disY = event.clientY - parseInt(elem.style.top);
        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
        stopBubble(event);
        cancelHandler(event);

      })

      function mouseMove(e) {
        var event = e || window.event;
        elem.style.left = event.clientX - disX + "px";
        elem.style.top = event.clientY - disY + "px";

      }

      function mouseUp(e) {
        var event = e || window.event;
        removeEvent(document, 'mousemove', mouseMove);
        removeEvent(document, 'mouseup', mouseUp);
      }
    }
  </script>
</body>

</html>