详解js几个绕不开的事件兼容写法


Posted in Javascript onAugust 30, 2017

本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下:

1、键盘事件 keyCode 兼容性写法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
 e = e ? e : (window.event ? window.event : "")
 return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
 result.innerHTML = getKeyCode(e)
}

2、求窗口大小的兼容写法

当我们获取滚动条滚动距离时:

IE,Chrome: document.body.scrollTop

FF: document.documentElement.scrollTop

// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

3、DOM 事件处理程序的兼容写法(能力检测)

var eventshiv = {
  // event兼容
  getEvent: function(event) {
    return event ? event : window.event;
  },

  // type兼容
  getType: function(event) {
    return event.type;
  },

  // target兼容
  getTarget: function(event) {
    return event.target ? event.target : event.srcelem;
  },

  // 添加事件句柄
  addHandler: function(elem, type, listener) {
    if (elem.addEventListener) {
      elem.addEventListener(type, listener, false);
    } else if (elem.attachEvent) {
      elem.attachEvent('on' + type, listener);
    } else {
      // 在这里由于.与'on'字符串不能链接,只能用 []
      elem['on' + type] = listener;
    }
  },

  // 移除事件句柄
  removeHandler: function(elem, type, listener) {
    if (elem.removeEventListener) {
      elem.removeEventListener(type, listener, false);
    } else if (elem.detachEvent) {
      elem.detachEvent('on' + type, listener);
    } else {
      elem['on' + type] = null;
    }
  },

  // 添加事件代理
  addAgent: function (elem, type, agent, listener) {
    elem.addEventListener(type, function (e) {
      if (e.target.matches(agent)) {
        listener.call(e.target, e); // this 指向 e.target
      }
    });
  },

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

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

4、解决 IE9 以下浏览器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

5、为一个元素绑定两个相同事件:attachEvent/attachEventLister 出现的兼容问题

事件绑定:(不兼容需要两个结合做兼容if..else..)

IE8以下用: attachEvent('事件名',fn);

FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);

function myAddEvent(obj,ev,fn){
   if(obj.attachEvent){
    //IE8以下
    obj.attachEvent('on'+ev,fn);
   }else{
    //FF,Chrome,IE9-10
    obj.attachEventLister(ev,fn,false);
   }
  }

6、获取元素的非行间样式值

function getStyle(object,oCss) {
    if (object.currentStyle) {
     return object.currentStyle[oCss];//IE
    }else{
     return getComputedStyle(object,null)[oCss];//除了IE
    }
  }

7、节点加载

//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同
//感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
You might like
thinkphp配置连接数据库技巧
2014/12/02 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
ExpressJS入门实例
2015/01/14 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
tensorflow自定义激活函数实例
2020/02/04 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
工程班组长岗位职责
2013/12/30 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
材料会计岗位职责
2014/03/06 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
求职信结尾怎么写
2014/05/26 职场文书
合作协议书范文
2014/08/20 职场文书
叶问观后感
2015/06/15 职场文书
安全教育培训心得体会
2016/01/15 职场文书