JS事件中的兼容问题

电玩女神 2022-05-30 10:25 176阅读 0赞

**1. 事件对象event的兼容问题**

**   ** IE9+ :** ** event                     ** **IE9- **:** window.event

e = e || window.event;
    可简写为:
    e = e || event;

**2. 获取鼠标位置 pageX, pageY 的兼容问题**

**   ** e.clientX / e.clientY     无兼容问题 (获取到页面可视框的距离)  ** **

**   ** e.pageX / e.pageY    IE9+ (9-不兼容)

function getXY(e){
                e = e || window.event;
                var x = 0,
                    y = 0;
                if(e.pageX){
                    x = e.pageX;
                    y = e.pageY;
                }else{
                    var cleft = document.documentElement.scrollLeft;
                    var ctop = document.documentElement.scrollTop;
                    x = cleft + e.clientX;
                    y = ctop + e.clientY;
                }
                return {x:x,y:y};
            }

**3. 添加事件的兼容问题**

**   ** element.addEventListener(type, function, boolean);

elemnet.attachEvent(type, function, boolean);    ***IE***

function bind(el, type, callBack){
                if(el.addEventListener){
                    el.addEventListener(type, callBack);
                }else{
                    el.attachEvent("on"+type, callBack);
                }
            }

**4. 事件对象获取目标事件对象的兼容问题**

**   ** event有两个属性:

1. 获取当前事件对象(e.currentTarget)

2. 获取目标事件对象(e.target / e.srcElement)

var target = e.target || e.srcElement;

当前事件对象就是添加了监听事件的对象,而目标事件对象可能不一样,举例说明吧

<div id="box"><span>点我</span></div>

给div注册点击事件,当前对象就是div,鼠标点div时目标事件是div,而鼠标点span标签时,目标事件是span,点谁谁是目标事件对象,其他的事件也一样.

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中的事件

1.鼠标事件 ①onclick:点击 ②dblclick;双击 ③mouseover;鼠标进入 ④mouseout;鼠标移出 ⑤mousedown;移...

柔情只为你懂/ 2024年04月18日 19:09/ 0 赞/ 60 阅读

相关 JS中的事件

1、常用事件焦点类、点击类、键盘类、鼠标类、表单类、文本类 1、焦点类 blur 失去焦点（失焦） focus 获得焦点（聚焦） ![2ce14e078c974

缺乏、安全感/ 2024年04月03日 08:45/ 0 赞/ 87 阅读

相关 js兼容问题

1： $(document).delegate(“body”,”click”,function()\{ alert(123); \}); 在iphone上无效

柔情只为你懂/ 2022年09月24日 11:20/ 0 赞/ 129 阅读

相关事件对象的兼容及添加和删除事件的兼容

1. 元素 . addEventListener () 给一个元素添加事件（添加事件监听）；传两个参数第一个为事件名例如 “click” 记得不

﹏ヽ暗。殇╰゛Y/ 2022年06月18日 10:13/ 0 赞/ 187 阅读

相关 Js中的事件

一、鼠标事件 1. mouseDownAction //鼠标按下的时候触发 2. mouseMoveAction //鼠标移动的时候触发 3. mouseUpAc

偏执的太偏执、/ 2022年06月10日 00:46/ 0 赞/ 183 阅读

相关 JS中浏览器兼容性问题

1、浏览器的宽高问题 var winW=document.body.clientWidth||document.docuemntElement.clientWidth

╰半橙微兮°/ 2022年06月09日 11:11/ 0 赞/ 283 阅读

相关 JS事件中的兼容问题

1. 事件对象event的兼容问题 IE9+ : event IE9- : window.event e = e

电玩女神/ 2022年05月30日 10:25/ 0 赞/ 177 阅读

相关 js 解绑事件的兼容

> <!DOCTYPE html> > <html lang="zh-cn"> > <head> > <meta charset="UTF-8"> >

た入场券/ 2022年03月11日 01:37/ 0 赞/ 236 阅读

相关原生JS的兼容性问题

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题　封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

妖狐艹你老母/ 2021年12月12日 00:23/ 0 赞/ 307 阅读

相关 js event事件兼容写法总结

还可将以下的方法放进对象里存放 <html> <head> <meta charset="utf-8"> <title></titl

川长思鸟来/ 2021年07月24日 19:53/ 0 赞/ 488 阅读