位置: 编程技术 - 正文

JavaScript焦点事件、鼠标事件和滚轮事件使用详解

编辑:rootadmin

推荐整理分享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个鼠标事件:

举例如下:

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

顺序如下:

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

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

滚轮事件

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

如:

页面坐标位置pageX与pageY;

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

屏幕坐标位置screenX和screenY;

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

修改键

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

相关元素

event.relatedTarget与event.target;

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

JavaScript焦点事件、鼠标事件和滚轮事件使用详解

如:

如:

鼠标按钮

button属性

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

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

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

兼容版:

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

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

更多的事件信息

detail属性

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

鼠标滚轮事件

mousewheel事件和wheelDelta属性

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

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

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

通用版:

触摸设备

iOS和Android设备中:

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

无障碍性问题

使用click事件执行代码;

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

JavaScript知识点总结之如何提高性能 JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点

探讨JavaScript标签位置的存放与功能有无关系 在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。一般来说,script元素放在哪里与其的功能作用是紧密相关的

JavaScript程序开发之JS代码放置的位置 JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下。一般来说有两种方式,写在界面上和使用.js文件。1.1界面上的Head部分可以

标签: JavaScript焦点事件、鼠标事件和滚轮事件使用详解

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

上一篇:JavaScript提高性能知识点汇总(javascript 性能)

下一篇:JavaScript知识点总结之如何提高性能(js知识总结)

  • 企业所得税和增值税重复收税了吗
  • 固定资产登记在三栏式吗
  • 备案办税人员信息填本人的有风险吗
  • 净资产账面价值怎么计算
  • 小规模能开劳务费吗
  • 资产减值损失属于什么科目借方增加还是减少
  • 收到货款开的增值税发票怎么写分录
  • 招标代理公司转让
  • 培训费发票可以抵扣进项税吗
  • 全年一次性奖金计税方式
  • 一般纳税人花椒税率
  • 哪些搬迁情形属于“政策性搬迁”?所得税怎么处理?
  • 新公司领取营业执照后的流程
  • 同一控制下企业合并入账价值
  • 其他应付款社保贷方余额怎么冲平
  • 每股股份价格
  • 冲账的记账凭证冲销错误记录
  • 挂靠的工程个人所得税怎么交?
  • 金蝶采购发票怎么红冲
  • 取得其他权益工具投资发生的交易费用
  • 合并报表同一控制下和非同一控制下区别
  • 简述linux系统
  • uniqpp
  • 公司赞助是什么意思
  • ui.exe啥意思
  • 停产企业税收申请减免
  • 免税需要什么条件
  • 企业清算分配的财产金额怎么算出来
  • 公司报销额度是什么意思
  • 3d reconstruction
  • vue项目创建流程
  • 基于VGGNet乳腺超声图像数据集分析
  • 采购和销售都做的叫什么
  • 购入库存商品会计分录摘要
  • 工业企业成本核算会计分录
  • DEDECMS php.ini register_globals must is Off!如何解决
  • 月度合并报表与年度合并区别
  • 怎么修改申报数据
  • 关联企业能否做法人代表
  • 预收货款开票怎么做账
  • 两个日期是否一致
  • 应收账款与应付账款冲账
  • 预收账款挂账多长时间必须确认收入
  • 搬迁补偿款的会计分录
  • 购进材料,已付,材料尚未验收入库
  • 结转成本附什么附件
  • 长期股权投资如何入账
  • 其他应收款有哪些科目
  • 增值税进项税转出额可以税前扣除吗
  • 没有认证的进项发票可以做成本吗
  • 建筑施工企业会计分录大全
  • 房地产企业会计科目
  • sql servers
  • ubuntu mysql 5.6版本的删除/安装/编码配置文件配置
  • linux系统讲解
  • win10预览版21277
  • WIN7系统如何设置表格默认保存位置
  • ubuntu 20.04 unity
  • 显示隐藏文件也看不到
  • hdaudpropshortcut.exe是什么进程 作用是什么 hdaudpropshortcut进程查询
  • ubuntu12安装教程
  • win7系统无法创建分区也无法定位
  • win10系统附件游戏被删除
  • linux系统怎么复制文件到u盘
  • win7小技巧
  • windows中创建的任务计划可以多久执行一次任务?
  • activity lunchmode详解
  • jquery选择器的使用
  • js实现原理
  • 使用js如何创建元素
  • unity 3d online document
  • jquery使用教程
  • wpf窗口嵌套
  • js实现的倒计时怎么用
  • python包含指定内容的字符串
  • python的for函数
  • 税务举报电话号码
  • 2020宜兴市民中心营业时间
  • 公路客运购票
  • 种植业税收优惠政策2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设