位置: IT常识 - 正文

Js之鼠标事件-鼠标事件(js鼠标事件包括哪几种)

编辑:rootadmin
Js之鼠标事件-鼠标事件 一 、常用到的鼠标事件类型事件click单机鼠标左键时发生,如果右键也按下则不会发生dbclick双击鼠标左键时发生,如果右键也按下则不会发生mousedown单击任意一个鼠标按钮时发生mouseover鼠标指针位于某个元素上且将要移除元素的边界时发生mouseout鼠标指针移出某个元素到另一个元素上时发生mouseup松开任意一个鼠标按钮时发生mousemove鼠标在某个元素上时持续发生二、鼠标点击事件

推荐整理分享Js之鼠标事件-鼠标事件(js鼠标事件包括哪几种),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js的鼠标事件,js的鼠标点击事件,js鼠标事件包括哪几种,js的鼠标事件,js的鼠标事件,js鼠标事件包括哪几种,js鼠标事件包括哪几种,js的鼠标点击事件,内容如对您有帮助,希望把文章链接给更多的朋友!

鼠标点击事件包括 click(点击),dbclick(双击),mousedown(按下)和 mouseup(松开)四个。其中 click 事件比较常用,而mousedown 和 mouseup事件类型多用于鼠标施放,拉伸操作中。当这些事件处理函数的返回值为false时,会禁止绑定对象的默认行为。

Js之鼠标事件-鼠标事件(js鼠标事件包括哪几种)

实例如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: skyblue; } </style></head><body> <div></div> <script> var div = document.querySelector('div') // 鼠标点击盒子变粉 div.addEventListener('click',function(){ this.style.background = 'pink' }) </script></body></html>三、鼠标经过事件

鼠标经过包括移入和移出两种事件类型。当移动鼠标指针到某个元素上时,将触发 mouseover事件。而当把鼠标指针移出某个元素时,将触发mouseout事件。如果从父元素中移动到子元素中,也会触发元素的mouseover事件类型。

实例如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: skyblue; } </style></head><body> <div></div> <script> var div = document.querySelector('div') // 鼠标移入盒子变粉 div.addEventListener('mouseover', function () { this.style.background = 'pink' }) // 鼠标移出盒子变黑 div.addEventListener('mouseout', function () { this.style.background = 'black' }) </script></body></html>

四、鼠标移动事件

mousemove 事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。

实例如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: skyblue; } </style></head><body> <div></div> <script> var div = document.querySelector('div') // // 鼠标在盒子内移动后盒子变粉 div.addEventListener('mousemove', function () { this.style.background = 'pink' }) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/296010.html 转载请保留说明!

上一篇:基于Vue的在线购物系统的设计与实现(论文+源码)_kaic(基于vue的网上商城)

下一篇:最新版本 Stable Diffusion 开源 AI 绘画工具之使用篇(最新版本金铲铲强势阵容)

  • win11小组件怎么关闭(win11小组件怎么移动位置)

    win11小组件怎么关闭(win11小组件怎么移动位置)

  • 荣耀X30i支持人脸解锁吗(荣耀x3设置)

    荣耀X30i支持人脸解锁吗(荣耀x3设置)

  • 360浏览器打开网页提示证书风险怎么解决(360浏览器打开网页总是新建窗口)

    360浏览器打开网页提示证书风险怎么解决(360浏览器打开网页总是新建窗口)

  • 如何在excel中打印在一页上(如何在excel中打纯等号)

    如何在excel中打印在一页上(如何在excel中打纯等号)

  • 苹果X怎么设置下面透明(苹果x怎么设置锁屏)

    苹果X怎么设置下面透明(苹果x怎么设置锁屏)

  • 短期封号限制哪些功能(短期封号最多几天)

    短期封号限制哪些功能(短期封号最多几天)

  • 淘宝直播可以放录播吗(淘宝直播可以放其他店铺链接吗)

    淘宝直播可以放录播吗(淘宝直播可以放其他店铺链接吗)

  • WPS怎么隐藏表格不需要的部分(wps怎么隐藏表格中的几列内容)

    WPS怎么隐藏表格不需要的部分(wps怎么隐藏表格中的几列内容)

  • 荣耀30s可以息屏显示时间吗(荣耀30s怎样设置灭屏显示)

    荣耀30s可以息屏显示时间吗(荣耀30s怎样设置灭屏显示)

  • 以太网可以上网吗(以太网可以上网的路由器)

    以太网可以上网吗(以太网可以上网的路由器)

  • 打印机文档被挂起是什么意思(打印机怎样扫描纸质文件成电子档)

    打印机文档被挂起是什么意思(打印机怎样扫描纸质文件成电子档)

  • 缓存和数据库不一致怎么办(如何解决缓存 和数据库数据不一致问题)

    缓存和数据库不一致怎么办(如何解决缓存 和数据库数据不一致问题)

  • 微信旺财表情代表什么(微信表情的旺财是什么意思)

    微信旺财表情代表什么(微信表情的旺财是什么意思)

  • 为什么无法打开语音控制(为什么无法打开icloud照片)

    为什么无法打开语音控制(为什么无法打开icloud照片)

  • oppo电话黑名单在哪里?(oppo电话黑名单在哪里解除)

    oppo电话黑名单在哪里?(oppo电话黑名单在哪里解除)

  • 苹果小钢炮什么时候上市(iphone小钢炮)

    苹果小钢炮什么时候上市(iphone小钢炮)

  • sim卡激活失败怎么办(sim卡激活失败怎么激活)

    sim卡激活失败怎么办(sim卡激活失败怎么激活)

  • word文档怎么添加着重号(word文档怎么添加方框)

    word文档怎么添加着重号(word文档怎么添加方框)

  • 拼多多新品活动在哪里报名(拼多多新品活动展现时间是多长)

    拼多多新品活动在哪里报名(拼多多新品活动展现时间是多长)

  • 手机wps怎么看字数统计(手机wps怎么看字体)

    手机wps怎么看字数统计(手机wps怎么看字体)

  • 添加尾注怎么设置(添加尾注怎么设置编号格式)

    添加尾注怎么设置(添加尾注怎么设置编号格式)

  • 收藏的照片在哪里找(收藏的照片在哪个文件夹)

    收藏的照片在哪里找(收藏的照片在哪个文件夹)

  • 微信地理位置怎么打开(微信地理位置怎么删除)

    微信地理位置怎么打开(微信地理位置怎么删除)

  • ppor17恢复出厂设置在哪里(ppbox1s恢复出厂设置)

    ppor17恢复出厂设置在哪里(ppbox1s恢复出厂设置)

  • win10闹钟关机后还有没(windows闹钟)

    win10闹钟关机后还有没(windows闹钟)

  • 收到天使投资如何做账
  • 生产企业发票单位
  • 2019年工会经费新规定
  • 员工报销汽油费可以抵扣进项税吗
  • 工业土地划拨性质有年限吗
  • 招拍挂方式取得土地,应该取得土地后立项
  • 业务招待费扣除计算
  • 没有及时取得发票可以入成本么
  • 库存商品的成本核算
  • 工会经费怎样申报
  • 不能够满足标准的产品为不合格品
  • 开办费转入管理费用分录
  • 没有申报增值税不能领发票吗
  • 个人付款可以开发票吗
  • 包工不包料会计处理
  • 电子发票可以打多少行
  • 不得抵扣且未抵扣什么意思
  • 怎样理解递归
  • 印花税征税范围包括所有合同
  • 房产税征收范围包括商铺吗
  • 避税和不避税怎么选
  • 国税申报纳税调整项目怎么填的?
  • 工程项目管理人员任命书
  • 劳务报酬所得缴多少税
  • 取得海运费发票怎么入账
  • 企业公益捐赠的意义
  • 固定资产更新改造替换部件怎么做账务处理
  • 怎么进入登录
  • 实收资本是认缴出资吗
  • php readdir函数
  • framework怎么用
  • yolo 官网
  • vue3打包优化
  • php7多线程支持如何
  • 季报的利润表本月金额填的是当月数可以吗
  • vue3快速入门
  • ftp port命令
  • 苹果2021年在中国不能用了吗
  • 股东投资款超过注册资金的案例
  • 企业预付账款怎么做账
  • 织梦自定义字段
  • c语音中static
  • dede织梦怎么转成zblog
  • mongodb skip数据量大
  • 工会筹备金有优惠政策吗
  • 城建税和教育费附加地方教育费附加税率
  • 印花税怎么交,在哪里交
  • sqlserver2008不存在或拒绝访问怎么办
  • 税金及附加可以结转吗
  • 保险合同包含什么
  • 库存商品发出计价测试
  • 个人所得税经营所得税申报表A表
  • 结转本月销售材料成本
  • 新手入门会计
  • 个体户建账吗
  • mysql必知必会 pdf完整版
  • mysql写错了怎么结束
  • window怎么升级系统
  • Win10控制面板在c盘哪里
  • windows xp搜索功能在哪里
  • 笔记本xp无线网络连接禁用启用不了
  • SPBBCSvc.exe - SPBBCSvc进程是什么文件 有什么作用
  • xp 更新
  • win8应用商店无法连接网络
  • centos 做bond
  • win7系统出现蓝屏怎么解决
  • Win10 Mobile 10586.312提前体验
  • win8如何安装软件
  • canvas的使用步骤
  • python中的字典与列表属于什么类型
  • 简述javascript的主要特点
  • 出口退税退运需要什么
  • 北京地方税务局电话
  • 开票员怎么登录电子税务局进行开票验证
  • 安徽国家税务局增值税发票查询平台
  • 代理记账的账本是什么
  • 公安驻税务联络办公室
  • 种植业税收优惠政策2023
  • 广州哪里有餐饮费发票
  • 上饶国资委领导班子成员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设