拦截浏览器开发者工具上的鼠标指针变化

Question

有没有可能在鼠标光标变化时使用断点之类的方式拦截鼠标光标？使用实际浏览器的开发者工具？

例如，当我将鼠标悬停在 div 上时，它包含一个 style="cursor:pointer;" 它会在开发人员工具中停止，警告我鼠标指针已更改，当我悬停时它会再次触发警告我说鼠标指针又变了？

Answer 1

您可以将事件绑定到页面上的所有元素并检查光标样式：

var oldCursorStyle = 'auto';
var myChangeFunction = function(cursorStyle) {
    console.info('It has changed to: ' + cursorStyle);
};
$('*').mouseenter(function(){
    var currentCursorStyle = $(this).css('cursor');
    if (oldCursorStyle != currentCursorStyle) {
       myChangeFunction(currentCursorStyle);
    }
    oldCursorStyle = currentCursorStyle;
});

仅当您要映射的所有元素都包含 "cursor" 样式属性时才有效。

Answer 2

正在阅读 this article 我在第 3 项中找到了解决方案。

以下步骤：

转到“元素”选项卡中的特定 HTML 节点；
右键单击元素
ContextMenu > Break On > 属性修改
为将要更改的属性定义一个值
引发变化

在那之后，我可以注意到使用“源”选项卡上的 CallStack 部分在代码中进行了此更改。

拦截浏览器开发者工具上的鼠标指针变化

Intercept mouse pointer change on browser's Developer tools

javascript

css

jquery

cross-browser

google-chrome-devtools