Question

我正在开发chrome扩展程序，并且某些功能允许用户单击按钮以选择当前页面上的元素（就像开发工具中的悬停功能一样）。我遇到的一个特定问题是，在大div中的某些元素（子元素）没有被选中时。有没有办法获取鼠标当前指向的最后一个子代？

注意：lastChild不起作用，因为它将使我得到最外层div的最后一个孩子。

这是流程：

popup.js

let selectElem = document.getElementById('select_element_button');
  selectElem.addEventListener("click", function(){
    chrome.runtime.sendMessage("hello");
  });

background.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    console.log(message + "from bg");
    if(message == "hello"){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
            chrome.tabs.sendMessage(tabs[0].id,"toContent");  
        });
    }
});

content.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    if(message == "toContent"){
        document.addEventListener("mouseover", (event) => {
            event.target.style.backgroundColor = "rgba(121, 204, 255, 0.4)";
        });
        document.addEventListener("mouseout", (out) => {
            out.target.style.backgroundColor = "";
        });
    }
});

Answer 1

编辑：如果不包含element节点，则样式目标上的条件：

document.addEventListener("mouseover", (event) => {
    var el = event.target;
    var hasChildElement = false;
    if (el.hasChildNodes()) {
        for (var i = 0, j = el.childNodes.length; i < j; i++) {
            if (el.childNodes[i].nodeType === 1) {
              hasChildElement = true;
              break;
            }
        }
    }
    if (!hasChildElement) {
        el.style.backgroundColor = "rgba(121, 204, 255, 0.4)";
    }
});

更多有关节点类型的信息：https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType

用鼠标检测网页上的每个元素

1 个答案: