位置: 编程技术 - 正文

JavaScript事件类型中焦点、鼠标和滚轮事件详解

编辑:rootadmin

推荐整理分享JavaScript事件类型中焦点、鼠标和滚轮事件详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文针对JavaScript 事件中“事件类型”下“焦点、鼠标和滚轮事件”的注意要点进行整理,分享给大家供大家参考,具体内容如下

一、焦点事件

一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有:

blur:元素失去焦点,不会冒泡; DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin; DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用focusout; focus:元素获得焦点,不回冒泡; focusin:获得焦点,与HTML事件focus等价,但会冒泡; focusout:失去焦点,与HTML事件blur等价;

如:

当焦点从页面中的一个元素转移到另一个元素会触发下面的事件:

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

二、鼠标事件

DOM3级事件中定义了9个鼠标事件:

click dblclick mousedown:用户按下任意鼠标按钮时触发,不能通过键盘触发这个事件; mouseup:用户释放鼠标按钮时触发,不能通过键盘触发这个事件; mousemove:不能通过键盘触发这个事件; mouseenter:不冒泡,且光标移动到后代元素上不会触发; mouseleave:不冒泡,且光标移动到后代元素上不会触发; mouseover:光标移动到后代元素上会触发; mouseout:光标移动到后代元素上会触发;

举例如下:

只有在同一个元素上相继除法mousedown和mouseup事件,才会触发click事件;只有触发两次click事件,才会触发依次dblclick事件。

顺序如下:

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

IE8之前的版本中有一个bug,在双击事件中,会跳过第二个mousedown和click事件

三、滚轮事件

1、客户区坐标位置clientX和clientY属性

如:

2、页面坐标位置pageX与pageY;

在IE8及更早版本中不支持这个页面坐标位置,可以计算出来,需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性:

3、屏幕坐标位置screenX和screenY;

通过该属性可以获得相对于屏幕的坐标。

4、修改键

JavaScript事件类型中焦点、鼠标和滚轮事件详解

修改键有Shift、Ctrl、Alt、Meta(window上的Windows键,苹果机上的Cmd键);对应的修改键的状态是shiftKey、ctrlKey、altKey、metaKey,这些属性包含的都是布尔值,如果相应的键被按下了,则为true,否则为false。如:

5、相关元素

event.relatedTarget与event.target;

relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件的值则是null;IE8之前的版本不支持relatedTarget属性,在mouseover事件触发时,IE的fromElement属性中保存了相关元素;在mouseout事件触发时,IE的toElement属性中保存着相关元素。

如:

如:

四、鼠标按钮

1、button属性

DOM的event.button属性有三个值:0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中,主鼠标按钮就是鼠标左键;次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性,但这个属性的值与DOM的button属性有很大差异:

0:没有按下鼠标按钮; 1:主鼠标按钮; 2:次鼠标按钮; 3:同时按下主鼠标按钮和次鼠标按钮; 4:中间鼠标按钮; 5:同时按下主鼠标按钮和中间鼠标按钮; 6:同时按下次鼠标按钮和中间鼠标按钮; 7:同时按下三个鼠标按钮

兼容版:

另外,如果要屏蔽鼠标右键,应该使用:

这个事件是HTML5定义的,以后再讨论

2、更多的事件信息

detail属性

对于鼠标事件来说,detail包含了一个数值,表示在给定位置上发生了多少次单击(一次mousedown和一次mouseup),次数从1开始计数,如果mousedown和mouseup之间移动了位置,detail会被重置0,如果单击间隔太长也会被重置为0.

3、鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直放向上滚动页面时,就会触发mousewheel,event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时,wheelDelta是的倍数;当向后滚动滚轮时,wheelDelta是-的倍数。如:

另外,在Opera 9.5之前的版本中,wheelDelta值的正负号是颠倒的。

此外,Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数,向后滚动,这个属性的值是3的倍数。

通用版:

4、触摸设备

iOS和Android设备中:

不支持dblclick; 轻击可单击元素会触发mousemove;如果此操作会导致内容变化,将不再有其他事件发声;如果屏幕没有发生变化,那么依次发生mousedown、mouseup和click事件; mousemove事件也会触发mouseover和mouseout事件; 两个手指操作会触发mousewheel和scroll;

5、无障碍性问题

使用click事件执行代码; 不要使用onmouseover向用户显示新的信息; 不要使用dblclick执行重要的操作;

标签: JavaScript事件类型中焦点、鼠标和滚轮事件详解

本文链接地址:https://www.jiuchutong.com/biancheng/382779.html 转载请保留说明!

上一篇:JavaScript实现给定时间相加天数的方法(javascript怎么弄)

下一篇:JavaScript实现获取某个元素相邻兄弟节点的prev与next方法(javascript获取html元素的方法)

  • 合同中增值税税率怎么描述
  • 工会经费税前扣除比例是多少
  • 企业所得税纳税义务人
  • 资产负债表债务法是什么意思
  • 两个账户往来款怎么做现金流量表
  • 软件公司企业成本预测
  • 一般纳税人留底税额抵减欠缴税额
  • 凭发票还是结算票据
  • 煤炭运输企业的环保方案及措施怎么写
  • 银行现金支票怎么填
  • 公司办理个人所得税退税
  • 城市生活垃圾处理收费管理办法
  • 注销时其他应付款余额怎么账务处理
  • 预付账款冲减费用
  • 分公司借款给总公司
  • 不动产在建工程使用的外购货物
  • 库存商品报废进项转出
  • 总公司名义取得的进项发票可以在分公司抵扣吗?
  • 独生子女保健费发到孩子多大年纪
  • 投资理财产品的风险性从低到高
  • 买粽子会计怎么做账
  • 涉税软件技术维护费可以全额抵扣吗?
  • 印花税的滞纳金怎么计算
  • 固定资产可以一次计入费用吗
  • 无偿获得固定资产的会计处理
  • 出售原材料属于营业收入吗
  • 补付工程款的分录
  • 员工意外伤害保险范围
  • 如何在windows11上安装动态壁纸
  • sinutrain破解版
  • mac底部菜单栏不见了快捷键
  • ae应用程序无法启动
  • kb4580419更新
  • windows10右键刷新有点卡
  • 如何进行抵债资金管理
  • 什么情况需要缴纳增值税
  • php操作文件的常用函数
  • 会计账目和账户的区别
  • SwinIR实战:详细记录SwinIR的训练过程
  • h5支付功能
  • sass和less的区别使用
  • taskset命令详解
  • 人力资源管理公务员岗位
  • 尚未抄税无法申报
  • 展会门票怎么入账
  • 帝国cms移动端
  • pythongui库
  • 投资性房地产在资产负债表中的列示
  • 支票的法人章盖倒了了可以吗
  • 商业一般纳税人辅导期截止时间
  • 销售费用期末余额
  • 持有至到期投资减值准备
  • 预缴的增值税在增值税附表四怎么填
  • 发票优惠金额怎么开
  • 库存股算什么科目
  • 外经证预交税款可以以后月份抵扣吗
  • 辅助生产成本应计入什么
  • 待摊费用怎么做凭证科目
  • mysql备份与恢复数据库
  • 完美解决英语怎么说
  • kdeskcore.exe是什么
  • 电脑xp自带的杀毒软件在哪里
  • mac os x 10.9.5
  • centos权限不够怎么办
  • dmidecode 硬盘
  • win8安装应用商店
  • windows8c盘满了怎么清理
  • 网络连接受限怎么处理win8
  • Unity Socket TCP
  • cocos2d怎么用
  • python语言解析
  • javascript简单代码
  • python利用matplotlib库绘制六边形
  • js的异步解决方案有哪些
  • jquery禁用输入框
  • js如何实现重置功能
  • python坑人代码
  • 企业所得税税率10%
  • 怎么看有没有欠税
  • 梨树烧烤一条街打人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设