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

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

注意：lastChild不起作用，因为它将为我获取最外层父div的最后一个子级

以下是流程：

popup.js

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

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");  
        });
    }
});

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 = "";
        });
    }
});

background.js

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

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");  
        });
    }
});

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 = "";
        });
    }
});

content.js

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

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");  
        });
    }
});

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 = "";
        });
    }
});

---

编辑：如果不包含

元素

节点，则设置目标样式的条件：

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)";
    }
});

document.addEventListener（“鼠标悬停”，（事件）=>{
var el=事件目标；
var hasChildElement=false；
if（el.hasChildNodes（））{
对于（var i=0，j=el.childNodes.length；i

---

有关节点类型的更多信息，请参见此处：

这对我不起作用。从本质上说，我试图将没有子元素的元素作为目标。如果不包含

元素

节点，则在设置目标样式时添加了一个条件