js的一些兼容融性问题
1.非行内样式获取
高级浏览器
getComputedStyle(obox.false)//获取所有属性
ie浏览器
box.currentStyle//获取所有属性
兼容写法
function getStyle(ele,attr){//ele为获取元素,attr为属性。
var a = "";
if(ele.currentStyle){
a = ele.currentStyle[attr];
}else{
a = getComputedStyle(ele,false)[attr];
}
return a;
}
2.事件冒泡的兼容
高级浏览器
e.stopPropagation()
ie浏览器
e.cancelBubble = true;
兼容写法
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
3.阻止默认事件
高级浏览器
e.preventDefault()
ie浏览器
e.returnValue = false
兼容写法
function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false;
}
}
4.DOM2级绑定事件
高级浏览器
obox.addEventListener("click",fn)
ie浏览器
obox.attachEvent("onclick",fn)
兼容写法和删除兼容
//绑定兼容写法
addEvent(obox,"click",fn1)
function fn1(){
console.log()
}
function addEvent(ele,type,cb){
if(ele.addEventListener){
ele.addEventListener(type,cb)
}else if(ele.attachEvent){
ele.attachEvent("on"+type,cb)
}else{
ele["on"+type] = cb;
} }
//删除的兼容
removeEvent(obox,"click",fn1)
function removeEvent(ele,type,cb){
if(ele.removeEventListener){
ele.removeEventListener(type,cb)
}else if(ele.detachEvent){
ele.detachEvent("on"+type,cb)
} else{ele["on"+type] = null;
}
}
6.ajax的兼容
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
7.获取滚动条距离
var sTop = document.documentElement.scrollTop || document.body.scrollTop
8.鼠标编码的兼容
function getButton(evt){
var e = evt || window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case : return ;
case : return ;
case : return ;
}
}
}
9.获取键盘编码的兼容
evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
js的一些兼容融性问题的更多相关文章
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- nodejs——js 实现webSocket 兼容移动端
nodejs——js 实现webSocket 兼容移动端 //服务器端 //npm install --save ws const express = require('express'); cons ...
- IE和firefox火狐在JS、css兼容区别
1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...
- JS/JQ常见兼容辅助插件
1.Respond.js Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-widt ...
- html5 video.js 使用及兼容所有浏览器
废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...
- 加入收藏夹的js代码(求兼容chrome浏览器的代码)
从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...
- JS事件及其兼容用法
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 1.事件流:描述的是从页面中接收事件的顺序. IE提出的事件冒泡流:事件开始由最具体的 ...
- JS中的兼容问题总结
今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop || document.body.scrollTop ...
随机推荐
- Vue于React特性对比(三)
最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...
- 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局
效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...
- java+断点续传
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- 关于CAShapeLayer的一些基本操作
设置圆形进度条: 实现效果如下: 实现代码如下:(注释很详细啦!!!) UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(, , ...
- iOS-同步下载与异步下载
一.同步下载(交互不好,容易出现卡死现象,一般下载数据较小或有特定需求才使用). 发送同步请求后,程序将停止用户交互,直到服务器返回数据完成后,才进行下一步的操作. //第一步:创建URL NSURL ...
- 公钥加密-DES-RSA
公理 双方使用同一规则加密---------密钥(对称加密算法DES)data encryption standard 最大问题 双方一起制定--------办法:密钥交换算法,不用直接传递密钥--- ...
- git命令自动补全
git安装好后发现命令不能自动补全于是搜了很多方法,先按博客里面的方法试了下: 1.下载配置文件 git clone git://git.kernel.org/pub/scm/git/git.git ...
- Nmap工具介绍
使用方法 实例: nmap -v scanme.nmap.org 这个选项扫描主机scanme.nmap.org中 所有的保留TCP端口.选项-v启用细节模式. nmap -sS -O scanme. ...
- 《精通并发与Netty》学习笔记(15 - 详解NIO中Buffer之position,limit,capacity)
一.前言熟悉NIO的人想必一定不会陌生buffer中position,limit,capacity这三个属性吧,之前在学习的时候遇到一个问题:就是当你先往缓冲区写入一部分数据,然后调用flip()方法 ...
- WIN10家庭版添加"本地安全策略"
新建文本文件 输入一下命令 @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages\Microsoft-Windo ...