详解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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
js类型检查实现代码
Oct 29 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
php SQL之where语句生成器
2009/03/24 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
js 事件小结 表格区别
2007/08/13 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JavaScript模拟push
2016/03/06 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python正则表达式指南 推荐
2018/10/09 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
企业总经理岗位职责
2014/02/13 职场文书
法律七进实施方案
2014/03/15 职场文书
调研汇报材料范文
2014/08/17 职场文书
会计岗位职责范本
2015/04/02 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript