如何在Chrome开发工具中查找事件监听器? [英] How to find an event listener in Chrome Dev Tools?

问题描述

我知道将鼠标悬停在一个元素上会导致另一个元素向其添加新类.如何检查该事件监听器在Chrome上的位置和位置? Chrome中的Event Listeners标签仅列出文档中的某些侦听器，而不是任何特定元素.

I know that hovering over an element causes another element to get a new class added to it. How do I check what and where this eventListener is on Chrome? The Event Listeners tab in Chrome just list some listeners on the document instead of any specific element.

推荐答案

要查看所选元素的事件侦听器，请确保取消选中事件侦听器"选项卡中的祖先"框.如果选中，您将看到该元素祖先的所有事件侦听器-可能就是您现在正在看到的.

To view event listeners for a single element you have selected, make sure you uncheck the 'Ancestors' box in the event listeners tab. If checked, you will see all event listeners for the ancestors of that element - which may be what you are seeing now.

悬停实际上并没有向元素添加另一个类，而是触发了可以通过CSS伪类选择器定位的元素的悬停状态.这不是事件侦听器，但是可以添加事件侦听器以检测元素上的鼠标指针(请参见答案结尾).这是使用:hover伪类选择器定位任何段落标签的悬停状态的示例:

Hovering doesn't really add another class to an element, it triggers a hover state for the element which can be targeted with a CSS pseudo-class selector. This is not an event listener but there are event listeners that can be added to detect the mouse pointer over the element (see end of answer). Here is an example of targeting the hover state of any paragraph tag with the :hover pseudo-class selector:

 p:hover {
      background: blue;
      color: white;
    }

<p>Hover me</p>
<p>Or hover me</p>

在Chrome DevTools中，您可以在元素上强制悬停状态以查看其悬停状态行为.为此，请单击样式窗格右上方的:hov按钮，然后选中:hover框.如果该元素有任何伪类:hover样式规则，则它们现在将显示在样式窗格中，并且该元素将在视口中相应更改.

In Chrome DevTools, you can force a hover state on the element to view its hover state behavior. To do this click the :hov button at the top right of the styles pane, and then check the :hover box. If there are any pseudo-class :hover styling rules for that element, they will now be displayed in the styles pane and the element will change accordingly in the viewport.

有一些事件侦听器，例如'mouseover'和'mouseout'，它们一起使用时，将模拟悬停状态行为.但是请注意，它们独立于悬停状态-因此在DevTools中强制悬停状态不会导致这些事件侦听器触发.如果这些事件侦听器出现在您要检查的元素上，它们将显示在事件侦听器"选项卡中-如果您正在检查包含大量事件侦听器的页面，请记住取消选中祖先"框.

There are event listeners such as 'mouseover' and 'mouseout' which, when used together, will emulate the hover state behavior. Note, however, that these are independent of the hover state - so forcing a hover state in DevTools will not cause these event listeners to trigger. If these event listeners are present on the element you are inspecting, they will show up in the event listeners tab - just remember to uncheck the 'Ancestors' box if you are inspecting a page with a lot of event listeners.

这篇关于如何在Chrome开发工具中查找事件监听器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！