位置: 编程技术 - 正文

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知识总结)

  • 印花税的缴纳方式有哪三种
  • 财会英语汇总:税收术语?
  • 如何查询继续教育证书
  • 承兑可以要吗
  • 职工福利费允许结转以后年度扣除吗
  • 金税系统怎么录入专票
  • 500元以内的商品都有哪些
  • 现金流量表中购建固定资产怎么计算
  • 没经营的个体户营业执照怎么注销
  • 煤炭企业会计制度
  • 转出未交增值税和转出多交增值税
  • 房租抵扣个税需要提供发票吗
  • 行政单位应缴预算款的管理原则
  • 应交税费未交增值税借方余额表示什么
  • 股权转让溢价部分怎么做分录
  • 打官司败诉承担的费用
  • 股权转让如何避免缴纳个税
  • 什么叫统借统还业务
  • 一般纳税人购车可以抵扣多少税
  • 合并报表收费
  • 与权益法核算相关的累计净损益
  • 应付职工薪酬年末需要结转吗
  • 手机中的流量统计在哪里寻找
  • win10锁屏界面不能输入密码
  • word字体平滑
  • 设备拆装费计入什么科目
  • 预算与决算对比分析
  • 电脑中毒了怎么弄
  • 使用的磁盘空间在哪
  • win10为什么每次开机都要输入微软密码
  • php数组有哪几种类型
  • 补交上一年度的企业所得税费用的分录
  • 一些出口商为什么要倾销
  • 公司并购的税务处理办法
  • 提示内存不足
  • PHP:zip_entry_compressedsize()的用法_Zip函数
  • 购买用友财务软件
  • 如何设置长期有效的群二维码安卓手机
  • php实现简单的登录验证
  • php中类静态成员描述不正确的是
  • 环境检测费计入什么费用
  • vant ui
  • 应交增值税的账务处理有哪两种
  • 所得税弥补亏损年限10
  • 织梦怎么用
  • 数据库损坏了怎么修复
  • mysqldump导入数据库
  • uni appp
  • 新成立的公司企业所得税
  • 售后回购会计处理分录
  • 直接人工成本的计算公式
  • sqlserver2005数据库备份
  • 单位代个人交社保可以吗
  • 受疫情影响较大的上市公司有哪些
  • 代扣代缴的增值税额
  • 委托加工如何做会计处理
  • 明细账分类账登记
  • 购买不良债权如何追偿
  • 进项税额转出怎么操作
  • mysql闪退处理
  • centos6.10安装教程
  • win10的数据使用量是什么
  • vistaie9安装所需更新补丁
  • linux系统输入法锁定了怎么解开
  • a4腰多大
  • opengl cullface
  • 模型图怎么画
  • jquery 使用
  • Android游戏开发书籍
  • perl tr函数
  • window.navigate 与 window.location.href 的使用区别介绍
  • 播放一个灵异电影
  • 基于android的app的设计与开发
  • [置顶]马粥街残酷史
  • 解决js请求服务问题
  • jquery的实现原理
  • android数据存储与访问方式
  • 北京12366纳税服务平台
  • 贵州银行短信服务怎么开通
  • 幼儿掌握概念的名称容易真正掌握概念的内涵也很容易
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设