资讯专栏INFORMATION COLUMN

mouseover, mousedown才显示时dom的查看

YanceyOfficial / 836人阅读

摘要:在现实研发过程中,我们经常需要借助查看页面的节点。解决的方案找到当前页面绑定事件的代码在事件执行之后打一个断点。再执行时,就会停在断点处,页面也会显示隐藏的。此时就可以查看这个问题。

在现实研发过程中,我们经常需要借助chrome Devtool 查看页面的dom节点。但有的时候比较难找,经常被困扰者。
本篇文档就是对其中两个情况提供一下好的建议。

我们经常会这么写:会给dom节点上添加两个事件 mouseover和mouseout, 当鼠标悬浮节点时,显示某个dom节点,离开时这个节点消失。此时想看这个dom节点的样式就比较困难。

解决的方案:(1)找到当前页面绑定mouseover事件的代码. (2)在事件执行之后打一个断点。(3)再执行时,就会停在断点处,页面也会显示隐藏的dom。此时就可以查看这个问题。
代码事例:

操作截图:
通过Event Listener 找到事件绑定的代码

对代码进行打点,然后再执行这个代码,就可以查看dom了

还有一种情况,我们在鼠标按下去(mousedown)时显示dom节点,在鼠标松开(mouseUp)时隐藏dom节点,此时想查看这个dom节点也比较难。

这个时候通过上面的这个方案也可以解决哦。

ps:一个知识点--在chrome DevTool 的source下面的文件夹下,可以右击可以全局搜索


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104035.html

相关文章

  • mouseovermousedown显示dom查看

    摘要:在现实研发过程中,我们经常需要借助查看页面的节点。解决的方案找到当前页面绑定事件的代码在事件执行之后打一个断点。再执行时,就会停在断点处,页面也会显示隐藏的。此时就可以查看这个问题。 在现实研发过程中,我们经常需要借助chrome Devtool 查看页面的dom节点。但有的时候比较难找,经常被困扰者。本篇文档就是对其中两个情况提供一下好的建议。 我们经常会这么写:会给dom节点上添加...

    张春雷 评论0 收藏0
  • JQuery基础修炼-事件篇

    摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。 目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 cli...

    yy13818512006 评论0 收藏0
  • JQuery基础修炼-事件篇

    摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。 目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 cli...

    hikui 评论0 收藏0
  • JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”注意要点

    摘要:焦点事件一般利用这些事件与方法和属性配合。此外,支持一个名为的类似事件,也是在鼠标滚动滚轮时除法。 焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有: blur:元素失去焦点,不会冒泡; DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin; DOMFocusOut:同...

    clasnake 评论0 收藏0
  • jQuery 事件(一) 鼠标与键盘事件

    jQuery 鼠标事件 click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的,下面以click()事件为例 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 点击触发 $(ele...

    Gemini 评论0 收藏0

发表评论

0条评论

YanceyOfficial

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<