DOM元素 - 兼容写法

1.  scrollTop

    1. chrome      document.body.scrollTop

    2. IE && firefox  document.documentElement.scrollTop

 

2.  阻止事件默认行为

    1. 绑定事件

      1. 主流浏览器  e.preventDefault();

      2. 低版本 IE    e.returnValue = false;

    2. 没有绑定事件

      return false;

 

3.  事件绑定  PS:事件绑定后 return false 不能阻止默认行为

    1. 主流浏览器  obj.addEventListener('click', function () {}, false);

    2. 低版本 IE    obj.attachEvent('onclick', function () {});

            

4.  JS 拖拽时 选中文字

    1. 主流浏览器  return false;

    2. 低版本 IE 

        1. 捕获  obj.setCapture();

        2. 释放  obj.releaseCapture();

 

5.  事件 - 滚轮

    1. firefox

      obj.addEventListener('DOMMouseScroll', function (e) {

        console.log(e.detail);  // e.wheelDelta  === undefined;

      }, false);

      

    2. chrome && IE

      obj.onmousewheel = function (e) {

        console.log((e || event).wheelDelta);   // (e || event).detail === 0(number)

      };

    

6.  事件 - input,areatext 统计字数  PS:键盘输入就触发

    1. 主流浏览器    input.oninput = function () {};

    2. 低版本 IE 10-   input.onpropertychange = function () {};

 

7.  获取 HTML 元素的 CSS 样式  PS:css样式表里的样式

    1. 主流浏览器  getComputedStyle(obj, false)['属性名'];

    2. 低版本 IE    obj.currentStyle['属性名'];

  

8.  事件对象 event

    1. 事件源

      // chrome && IE  e.srcElement

      // firefox       e.target

 

    2. 从哪来的  (结合 mouseover事件)

      // chrome && IE   e.fromElement

      // firefox        e.relatedTarget

        

    3. 要去哪里  (结合 mouseout事件)

      // chrome && IE   e.toElement

      // firefox        e.relatedTarget

 

9.  元素节点

    1. (同级中)下一个元素节点  (没有下一个元素节点 返回null)

      // chrome && firefox  nextElementSibling

      // 低版本 IE        nextSibling

 

    2. (同级中)上一个元素节点  (没有上一个元素节点 返回null)

      // chrome && firefox  previousElementSibling

      // 低版本 IE        previousSibling

 

    3. (父级)里面首个子元素

      // chrome && firefox  firstElementChild

      // 低版本 IE        firstChild

 

    4. (父级)里面最后一个子元素

      // chrome && firefox  lastElementChild

      // 低版本 IE        lastChild

 

posted @ 2015-10-21 17:20  koala_熊  Views(208)  Comments(0Edit  收藏  举报