(原创)JS兼容性笔记(更新)
一. element.setAttribute 与 element.className
我们通过Js脚本对DOM 节点进行修改其样式class的时候,有几种方式进行操作:
1.element.setAttribute('className','xxxClass');//仅对IE有效
2.element.setAttribute('class','xxxClass');//仅对FF有效
3.element.className = 'xxxClass';//兼容IE与FF
当然我们可以通过判断浏览器来实现兼容如:
element.setAttrbute('className', 'xxxClass');
} else {
element.setAttrbute('class', 'xxxClass');
}
推荐第3种写法。
二.event事件
如果我们需要用到一个兼容IE和FF的JS事件,我们可以利用下面这段代码,这在很多需要做事件处理的JS代码中非常有用。
function getEvent(){
//同时兼容ie和ff的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
你可以用var event=getEvent();来获得一个兼容IE与FF的事件,比如如下这段兼容IE与FF的拖拽代码中可以用到它:
//对“拖动点”定义:onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
var move=false,_X,_Y;
function StartDrag(obj,winId){ //定义准备拖拽的函数
var event=getEvent();
//同时兼容ie和ff的写法
if (!window.captureEvents) {
obj.setCapture(); //对当前对象的鼠标动作进行跟踪
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
move=true;
//获取鼠标相对内容层坐标
var pos=jQuery('#'+winId).position();
jQuery('#'+winId).fadeTo(0,0.8);
_X=pos.left-event.clientX;
_Y=pos.top-event.clientY;
}
function DragWin(obj,winId){ //定义拖拽函数
var event=getEvent();
if(move){
var parentwin=jQuery('#'+winId);
var left_x;
var top_y;
if(event.clientX+_X < 0) {
left_x = 0;
} else if (event.clientX+_X > document.documentElement.clientWidth-$("#"+winId).width()) {
left_x = document.documentElement.clientWidth-$("#"+winId).width();
} else {
left_x = event.clientX+_X;
}
if(event.clientY+_Y < document.documentElement.scrollTop) {
top_y = document.documentElement.scrollTop;
} else if (event.clientY+_Y > document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height()) {
top_y = document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height();
} else {
top_y = event.clientY+_Y;
}
parentwin.css("left",left_x);
parentwin.css("top",top_y);
}
}
function StopDrag(obj,winId){ //定义停止拖拽函数
//同时兼容ie和ff的写法
if (!window.captureEvents) {
obj.releaseCapture(); //停止对当前对象的鼠标跟踪
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
jQuery('#'+winId).fadeTo(0,1);
move=false;
}
先留篇文档,便于更新记录日常工作中解决的浏览器兼容问题。
转载于:https://www.cnblogs.com/arix04/archive/2010/09/21/1832648.html
(原创)JS兼容性笔记(更新)相关推荐
- Node.js学习笔记 更新完毕 2022 coderwhyWEB前端体系课
一 Node.js是什么 官方对Node.js的定义: Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境 Node.js is a JavaScript runt ...
- 唤醒手腕 - 前端服务器端开发 Node.Js 学习笔记(学习中,更新中)
唤醒手腕 - Node.Js 学习笔记 唤醒手腕个人的学习记录,时间在2021年12月13日 ~ 2021年12月14日,学习方式看官方文档和B站视频,如有错误或者代码问题的地方,欢迎C站大佬能够帮忙 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 千锋Node.js学习笔记
千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...
- html 流程控制,HTML5独家分享:原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
- prototype.js开发笔记(转)
prototype.js开发笔记 Table of Contents 1. Programming Guide 1.1. Prototype是什么? 1.2. 关联文章 1.3. 通用性方法 1.3. ...
- Auto.js学习笔记1:开发需要准备什么工具和编程语言知识?
什么是Auto.js? 根据官方文档定义:Auto.js是一款无需root权限的JavaScript自动化软件. Auto.js是一款安卓手机的应用主要用webview,和微信一样,安装在手机上: A ...
- [原创]Saltstack学习笔记:命令参数详解以及配置文件说明
很久没有更新saltstack的文章了,今天还是来更新一点,又开始对saltstack复习了一下. 前边写了一点<saltstack入门概述(1)>以及<Saltstack如何安装( ...
最新文章
- python与MySQL交互
- 《软件工程方法与实践》—— 导读
- 第三次学JAVA再学不好就吃翔(part56)--StringBuffer的替换反转和截取功能
- 根因分析初探:一种报警聚类算法在业务系统的落地实施 1
- 华中师范大学本科生计算机课教师,华中师范大学第八届大学生计算机设计大赛的通知...
- 洛谷——P1009 [NOIP1998 普及组] 阶乘之和
- NPM — JavaScript 的包管理器
- 使用源代码编译安装基于LAMP的网站架构
- DevOps: 一例高负载多并发服务器连接池满的异常排解过程
- DSP技术-2-DSP的C语言同主机C语言的主要区别在哪里?
- Java项目:SSM会议室预约系统
- 电脑计算机无法搜索文件,电脑中的文件搜索功能出错怎么办?电脑无法搜索出实际存在的文件如何解决...
- u3d occlusion 遮挡剔除
- 计算机毕业设计SSM常见病辅助食疗系统【附源码数据库】
- 微信公众号工作中如何产生新媒体思维
- 天猫精灵开发技能【3】
- Zilliqa 的设计构思 第3部分:使共识更有效
- supervisor中使用虚拟环境
- knn算法,利用numpy简单实现
- 系统架构设计师2009-2022历年综合知识、案例分析、论文真题及答案详细解析
热门文章
- java 字符串用法_java中字符串的用法
- 米兔点读笔点读包_小米米兔点读笔评测:养成教育只要轻松一点
- 网络运维基础之IP地址学习
- aapt.exe已停止工作 r.java_【转】android错误 aapt.exe已停止工作的解决方法
- Windows安装python3.6.x版本
- C++向量 vector动态数组
- BZOJ3832 [Poi2014]Rally 【拓扑序 + 堆】
- Linux下tmp文件夹的文件自动删除的问题(转)
- post from open live writer
- css制作漂亮彩带导航条菜单