mouseover， mousedown才顯示時(shí)dom的查看

張春雷發(fā)布于2019-08-02 16:15 / 3222人閱讀

摘要：在現(xiàn)實(shí)研發(fā)過(guò)程中，我們經(jīng)常需要借助查看頁(yè)面的節(jié)點(diǎn)。解決的方案找到當(dāng)前頁(yè)面綁定事件的代碼在事件執(zhí)行之后打一個(gè)斷點(diǎn)。再執(zhí)行時(shí)，就會(huì)停在斷點(diǎn)處，頁(yè)面也會(huì)顯示隱藏的。此時(shí)就可以查看這個(gè)問(wèn)題。

在現(xiàn)實(shí)研發(fā)過(guò)程中，我們經(jīng)常需要借助chrome Devtool 查看頁(yè)面的dom節(jié)點(diǎn)。但有的時(shí)候比較難找，經(jīng)常被困擾者。
本篇文檔就是對(duì)其中兩個(gè)情況提供一下好的建議。

我們經(jīng)常會(huì)這么寫(xiě)：會(huì)給dom節(jié)點(diǎn)上添加兩個(gè)事件 mouseover和mouseout, 當(dāng)鼠標(biāo)懸浮節(jié)點(diǎn)時(shí)，顯示某個(gè)dom節(jié)點(diǎn)，離開(kāi)時(shí)這個(gè)節(jié)點(diǎn)消失。此時(shí)想看這個(gè)dom節(jié)點(diǎn)的樣式就比較困難。

解決的方案：（1）找到當(dāng)前頁(yè)面綁定mouseover事件的代碼. (2)在事件執(zhí)行之后打一個(gè)斷點(diǎn)。（3）再執(zhí)行時(shí)，就會(huì)停在斷點(diǎn)處，頁(yè)面也會(huì)顯示隱藏的dom。此時(shí)就可以查看這個(gè)問(wèn)題。
代碼事例：

操作截圖：
通過(guò)Event Listener 找到事件綁定的代碼

對(duì)代碼進(jìn)行打點(diǎn)，然后再執(zhí)行這個(gè)代碼，就可以查看dom了

還有一種情況，我們?cè)谑髽?biāo)按下去（mousedown）時(shí)顯示dom節(jié)點(diǎn)，在鼠標(biāo)松開(kāi)（mouseUp）時(shí)隱藏dom節(jié)點(diǎn)，此時(shí)想查看這個(gè)dom節(jié)點(diǎn)也比較難。

這個(gè)時(shí)候通過(guò)上面的這個(gè)方案也可以解決哦。

ps：一個(gè)知識(shí)點(diǎn)--在chrome DevTool 的source下面的文件夾下，可以右擊可以全局搜索

云服務(wù)器 GPU云服務(wù)器 mousedown 怎樣的服務(wù)器才好多大的服務(wù)器才夠用 mouseover

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54974.html

相關(guān)文章

mouseover， mousedown才顯示時(shí)dom的查看

摘要：在現(xiàn)實(shí)研發(fā)過(guò)程中，我們經(jīng)常需要借助查看頁(yè)面的節(jié)點(diǎn)。解決的方案找到當(dāng)前頁(yè)面綁定事件的代碼在事件執(zhí)行之后打一個(gè)斷點(diǎn)。再執(zhí)行時(shí)，就會(huì)停在斷點(diǎn)處，頁(yè)面也會(huì)顯示隱藏的。此時(shí)就可以查看這個(gè)問(wèn)題。在現(xiàn)實(shí)研發(fā)過(guò)程中，我們經(jīng)常需要借助chrome Devtool 查看頁(yè)面的dom節(jié)點(diǎn)。但有的時(shí)候比較難找，經(jīng)常被困擾者。本篇文檔就是對(duì)其中兩個(gè)情況提供一下好的建議。我們經(jīng)常會(huì)這么寫(xiě)：會(huì)給dom節(jié)點(diǎn)上添加...

YanceyOfficial 2019-08-23 17:14 評(píng)論0 收藏0
JQuery基礎(chǔ)修煉-事件篇

摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中，最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽(tīng)用戶單擊操作，另一個(gè)方法是方法用于監(jiān)聽(tīng)用戶雙擊操作。目錄第1章事件介紹第2章鼠標(biāo)事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對(duì)象的使用第7章自定義事件 cli...

yy13818512006 2019-08-02 15:55 評(píng)論0 收藏0
JQuery基礎(chǔ)修煉-事件篇

摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中，最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽(tīng)用戶單擊操作，另一個(gè)方法是方法用于監(jiān)聽(tīng)用戶雙擊操作。目錄第1章事件介紹第2章鼠標(biāo)事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對(duì)象的使用第7章自定義事件 cli...

hikui 2019-08-19 18:25 評(píng)論0 收藏0
JavaScript 事件——“事件類型”中“焦點(diǎn)、鼠標(biāo)和滾輪事件”的注意要點(diǎn)

摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個(gè)名為的類似事件，也是在鼠標(biāo)滾動(dòng)滾輪時(shí)除法。焦點(diǎn)事件一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有： blur：元素失去焦點(diǎn)，不會(huì)冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin； DOMFocusOut：同...

clasnake 2019-08-19 17:23 評(píng)論0 收藏0
jQuery 事件(一) 鼠標(biāo)與鍵盤事件

jQuery 鼠標(biāo)事件 click與dbclick事件用交互操作中，最簡(jiǎn)單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個(gè)方法一個(gè)是click方法用于監(jiān)聽(tīng)用戶單擊操作，另一個(gè)方法是dbclick方法用于監(jiān)聽(tīng)用戶雙擊操作。這兩個(gè)方法的用法是類似的，下面以click()事件為例方法一：$ele.click() 綁定$ele元素，不帶任何參數(shù)一般是用來(lái)指定觸發(fā)一個(gè)事件，用的比較少點(diǎn)擊觸發(fā) $(ele...

Gemini 2019-08-21 11:55 評(píng)論0 收藏0