位置: 编程技术 - 正文

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元素的方法)

  • 出口企业免抵税额要作进项转出吗
  • 纳税总额和实际上缴税费总额
  • 委托加工物资属于企业资产吗
  • 招标代理资质办理好办吗
  • 城市维护建设税是什么意思
  • 开采石头要交什么税
  • 增值税进项税额在借方还是贷方
  • 机动车发票有几联
  • 固定资产清理属于资产类的备抵科目吗
  • 开票退回怎么做账
  • 研发费用的检测费指的是什么内容
  • 固定资产折旧年限及残值率
  • 差旅费进项可以跨月抵扣吗
  • 贷款逾期账务处理流程
  • win11 应用商店
  • 电脑开始菜单在右边怎么调回来
  • 销售合同怎么计算印花税
  • 代发工资有什么弊端
  • 未入账发票可以作废吗
  • 销售折让双方会计分录
  • 固定资产后续支出一律计入固定资产成本
  • 华侨是否适用个人所得税
  • 只有收据没有发票怎么报销
  • 多目标pso
  • php怎么将数据库中的数据显示出来
  • php有哪些
  • 苹果系统推送通知
  • java 泛型方法
  • 金税盘抵免增值税怎么做账
  • 支付厂房租赁费怎么入账
  • 公对公二手车交易税
  • python复制文件的代码
  • 公司人员工资计算方法
  • 给员工买保险的好处和坏处
  • 一次性取得租赁合同
  • 研发费用明细科目怎么填
  • acca中ebq等于
  • 跨年银行回单怎么入账
  • 出纳去银行取钱需要带什么
  • 应付账款期初期末
  • 公司的零星费用可以用对公转吗
  • 财务费用手续费借贷方向
  • 对公账户进出账常识
  • 房地产开发企业会计制度
  • 结转成本涉及的科目
  • 间接持股比例如何分析
  • 公司买茶具帐务处理流程
  • 现金账务处理原则规定
  • 自产产品与视同自产产品
  • 零售商品储存的核算包括[ ]
  • sqlserver存储过程返回多个结果集
  • php+mysql prepare 与普通查询的性能对比实例讲解
  • 提升英语
  • centosip配置
  • 电脑开机自动弹出
  • ubuntu 12.04 intel集成显卡设置分辨率的步骤分享
  • 企业级路由器和普通路由器区别
  • Linux服务器管理的开机界面
  • centos文件权限详解
  • ubuntu安装chia
  • ubuntu命令行添加用户
  • windows无法访问指定设备路径权限
  • windows10 14393版本
  • win10图标预览
  • linux中使用less命令分屏查看
  • ExtJs3.0中Store添加 baseParams 的Bug
  • unity游戏开发入门经典
  • svn报错禁止访问
  • 批处理文件夹内文件名
  • 段正淳算正面人物吗
  • nodejs获取异步请求返回值
  • jquery返回顶部
  • 又一枚精彩的弹幕效果jQuery实现
  • wxpython怎么用
  • bootstrap要学到什么程度
  • 出售废铁的会计分录
  • 怎么代理保险业务
  • 建筑工地临时板房验收规范最新
  • 货物运输代理服务税率
  • 贵阳市税务稽查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设