首页前端开发HTML Js操作鼠标事件

Js操作鼠标事件

时间2024-05-20 04:32:03发布访客分类HTML浏览102
导读:注意onmouseover、onmouseout是只执行一次的,二onmousemove是执行多次的 Onmousedown也是只执行一次,每次点击才执行一次,不会持续触发,与onkeydown、onkeypress不同,这里是很乱的...

注意onmouseoveronmouseout是只执行一次的,二onmousemove是执行多次的

Onmousedown也是只执行一次,每次点击才执行一次,不会持续触发,与onkeydownonkeypress不同,这里是很乱的,鼠标事件到底有哪些???

在火狐中显示是undefined

ie中显示是undefined

但是上面的在谷歌中显示都是正常的,现在需要的做一个兼容,兼容IE与火狐

这里是有一个疑问的,单独的console.log(window),在其中看到的event属性是undefined,但是consoe.log(window.event),时显示的却是自己想要的效果,为什么会有这样的区别呢?

这是老师纠结的地方,但是我不知道到底是为啥这样

上面的分析是有错误的,在谷歌中,ewindow.event都是支持的,火狐只支持e,谷歌只支持window.event

传参与动态创建属性

由于e.pageXe.pageY这个属性在IE低版本不支持,(在IE低版本中显示是)所以利用可视区鼠标位置+滚动条卷曲高度来实现获取基于内容区的鼠标位置

Document上面的是window

事件捕获只是了解内容,在IE中不支持

事件处理函数,注意0级事件后面的事件是会覆盖前面的事件,这是很重要的

Window是可以省略的,上面的代码没什么意义

冒泡:从具体节点到不具体节点

现在代表的是捕获,但是没什么具体的效果,现在和冒泡是一样的

捕获:从不具体节点到具体节点

实现与函数执行上下文一样的效果,addEventListener()IE浏览器中不支持

上面是卸载DOM 0级事件的方法(卸载事件,若界面再次刷新的话,还是会继续执行该事件处理函数)

其实和卸载DOM0级事件是一样的效果

IE添加DOM2级事件

IE最新版本IE11已经是不支持attachEvent这个属性

IE卸载DOM2级事件

下面是封装函数:

这种写法在IE中显示为空

这种写法在非IE中是会直接报错

IE中显示是一个函数,IE中显示是undefined,下面的函数封装就是根据这样的原理来进行

由于事件捕获是很少使用到的,所以第四个值通常都是false,不用单独的传参,直接写死

在卸载时,不能在事件处理函数中使用匿名函数

注意在IE版本中的执行顺序

DOMContentLoaded现在是了解内容,注意一个概念:事件处理函数

封装函数:鼠标相对于内容区的鼠标Y轴的位置,兼容浏览器的DOM2级事件的添加与卸载

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: Js操作鼠标事件
本文地址: https://pptw.com/jishu/663909.html
学习HTML5的一些新特性 Js返回值问题

游客 回复需填写必要信息