详解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 相关文章推荐
表单提交验证类
Jul 14 Javascript
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
可以支持多中格式的JS键盘
May 02 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
第八节--访问方式
2006/11/16 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
JS合并两个数组的3种方法详解
2019/10/24 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
python多重继承实例
2014/10/11 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python中实现k-means聚类算法详解
2017/11/11 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python 同时运行多个程序的实例
2019/01/07 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
计算机求职信
2013/12/01 职场文书
现金会计岗位职责
2013/12/05 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
委托证明书
2014/09/17 职场文书
党的群众路线剖析材料
2014/10/09 职场文书