频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
mouseover,mousedown才显示时dom的查看-前端-SegmentFault思否
2019-04-30 19:50:26           
收藏   我要投稿

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

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

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

<p id="first">
</p>
<p id="second"></p>
</body>
<script src="http://lib.eqh5.com/jquery/2.0.3/jquery.min.js"></script>
<script>
    $('#first').on('mouseover', () => {
        $('#second').show();
    });
    $('#first').on('mouseout', () => {
        $('#second').hide();
    });
</script>

操作截图:
通过Event Listener 找到事件绑定的代码
\
对代码进行打点,然后再执行这个代码,就可以查看dom了

\

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

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

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

\
图片描述

点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇:【前端语言学习】学习minipack源码,了解打包工具的工作原理-个人文章-SegmentFault思否
下一篇:Docker入门-前端不止是前端-SegmentFault思否
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站