如何调试JS中鼠标悬停事件影响的元素?
如何调试JS中鼠标悬停事件影响的元素?
在日常的前端开发中,我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具,在 Elements
,Console
,Network
,Sources
,Performance
等多个 Tab
之间来回穿梭。
今天笔者来分享一个 Chrome
调试技巧,来方便的调试JS中鼠标悬停事件影响的元素。
什么是鼠标悬停事件?
鼠标悬停俗称 hover
,它会在鼠标指针悬停在被选元素上时触发。一般前端开发会利用 css
中的 :hover
伪类选择器,来给被选元素应用不同的样式,从而增强用户的体验感。
最常见的例子就是 Button
按钮,鼠标移上去变个色:
Force element-state 的局限性
在 Chrome
中,我们可以通过 Force element-state
来强制设置元素的状态,以此来调试鼠标悬停样式影响的元素。
操作方式,即先在 Elements
中选中目标元素,然后在右侧的工具栏中,选择 Styles
标签,点开 :hov
,然后在 Force element-state
中选择对应的元素状态即可(hover
)。
但是这种方式,往往只能调试一些 css
的伪类选择器,不能用来触发和调试 js
中的鼠标悬停事件。比如用 js
控制隐藏显示的 el-dropdown
下拉菜单就无法用此面板控制 (Live Demo)。
为了复现这个 case
, 我们写一段代码:
<template><div><div@mouseenter="visible = true"@mouseleave="visible = false">鼠标到这显示</div><div v-if="visible">隐藏内容</div></div>
</template>
<script setup lang="ts">
const visible = ref(false)
</script>
这段代码的意思很简单,当我们鼠标移入第一个div
时,显示隐藏内容。这个 case
用 Force element-state
也是无法调试的。那么我们要如何顺利的调试内部的隐藏内容呢?
方案一: 添加事件断点来卡住页面
打开控制台后,前往 Sources
标签页下的 Event Listener Breakpoints
(在控制台右侧的折叠面板处)。在里面找到 mouse
下对应的事件,比如 click
,mouseleave
等这些会导致特定元素改变消失的事件,打上勾。
然后回到页面上,去触发勾选的事件,就可以看到页面进入 debug
状态,同时页面元素被定格。此时就可以随便调试了。(有可能会有别的事件同时触发,非自己需要的,直接跳过即可。)
方案二: 移除对应的reset事件
从方案一,我们知道这个调试方案的核心要点,是阻止重置视图状态的 reset
事件的触发。那么我们大可以直接移除 reset
事件,来直接进行调试。
比如在之前的代码中,mouseenter
负责设置视图的状态(显示), mouseleave
负责重置视图的状态(隐藏)。那么我们仅仅需要移除重置视图的事件即可。方式也很简单,见下图:
点击 Remove
去除事件,然后回到视图进行调试即可。
如何调试JS中鼠标悬停事件影响的元素?相关推荐
- vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...
- js——设置鼠标悬停事件
鼠标悬停前后 function HoverAndMouseout(){$(".zhangjie").hover(function () {$(this).css({ "w ...
- vue 悬停显示另一个div_CSS或者JS实现鼠标悬停显示另一元素
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现. js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mo ...
- [html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现
下面是一个示例HTML代码,它创建了一个带有5行3列的表格,并为每一行添加了鼠标事件,当鼠标移到行上时,该行背景颜色变成蓝色,移出时恢复原来的颜色: 其中,onmouseover 和 onmouseo ...
- js实现鼠标悬停事件
介绍:把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- js中鼠标滚轮事件详解
<body style="height:2000px"><script type="text/javascript">var scrol ...
- html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
- python tk 获取鼠标事件_在Tkin中列出鼠标悬停事件函数
我正在制作一个医学工具的图形用户界面作为一个类项目.给定一个条件,它应该输出一堆从不同网站收集的治疗方案,比如webMD.我希望能够处理所列出的任何一种疗法的鼠标悬停事件,以提供关于该疗法的更多信息( ...
- java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
最新文章
- Java开发字符串JSON处理
- 那些妖术——树的遍历
- 讲一讲什么是 MMAP
- Silverlight实例教程 – Datagrid,Dataform数据验证和ValidationSummary
- Java建造圆判断是否在园内_java – 查找一个圆圈是否在另一个圆圈内
- 欢乐暑假-高校俱乐部暑期线上编程竞赛奖励机制
- helm安装postgres_添加到postgres数据库外的keycloak k8s helm chart环境参数
- maven aspectj_使用Spring AspectJ和Maven进行面向方面的编程
- linux cached释放_正点原子Linux第四十一章嵌入式Linux LED驱动开发实验
- 正宗PC Unix实验环境
- 前端开发 V8引擎是什么?
- mysql角色管理权限管理_mysql权限角色管理
- 苹果视频剪辑计算机配置,视频剪辑后期神器-创作PC黑苹果系统安装与台式电脑配置推荐...
- numpy.take()用法总结
- 计算机硬件有问题,计算机硬件有哪些
- autoware planning trajectory_smoother 模块解读
- unity3d 批量替换模型材质的脚本 一键替换模型及子物体材质
- linux 启动openfire
- HDU - 5984 Pocky(数学推导)
- 不怕神一样的对手,就怕猪一样的队友