1

Chrome(和 Firefox)都有非常棒的工具来更改元素的当前状态,例如将其设置为悬停状态,以便您可以检查/修改 css:

在此处输入图像描述

问题是这似乎不会引发任何 JavaScript 事件。

我目前正在尝试设置工具提示的样式,该工具提示在悬停时显示。当我将鼠标从所述元素上移开时,当工具提示消失时,手动将鼠标悬停在元素上很困难,并且在开发人员工具中将状态设置为悬停似乎不会触发 jQuery 事件。

我不得不求助于在开发人员工具检查器中的元素上添加一个 ID,然后在控制台中执行以下操作:

$("#custom-element-hover").mouseover();

感觉不对(而且有点麻烦)。

有没有更好的方法来做到这一点,我不知道?

4

3 回答 3

2

在一个简单的情况下,我认为使用控制台通常更容易。但在开发者工具中,你也可以找到事件监听器代码并在其上设置断点:

在此处输入图像描述

然后右键单击此处理程序并查看源代码,使用{}按钮取消最小化源代码并在此处理程序函数中设置断点。

如果此处理函数触发了不相关的事件,那么您可能需要右键单击它并设置断点条件或添加观察表达式以查看您何时处于正确的事件中。

您也可以使用相同的断点设置方法来跳过特定的 mouseout 事件。

于 2015-01-10T01:50:34.563 回答
1

我可以分享我在这种情况下所做的事情。我在 chrome 调试器中打开元素选项卡,然后右键单击目标元素。然后我选择“复制 CSS 路径”

在此处输入图像描述

如果你这样做,你会得到这样的东西

#mdhelp-tabs > li:nth-child(1)

这个字符串实际上可以用作 jQuery 的合法选择器。所以这

$("#mdhelp-tabs > li:nth-child(1)")

将给出带有 dom 目标元素的 jquery 对象。

因此,您不必为要处理的每个元素都分配一个 ID。

于 2015-01-15T08:27:33.977 回答
-1

I am not sure but you can use console to handle tooltip

enter image description here

于 2015-01-15T11:40:58.627 回答