Определить каждый элемент на веб-странице с помощью мыши - PullRequest
Новая
       13

Определить каждый элемент на веб-странице с помощью мыши

1 голос
/ 23 июня 2019

Я разрабатываю расширение для Chrome, и определенная функция позволяет пользователю нажимать кнопку, чтобы выбрать элемент на текущей странице (так же, как функция наведения в Dev Tools).Определенная проблема, с которой я сталкиваюсь, заключается в том, что некоторые элементы (дочерние элементы) в большом элементе 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");  
        });
    }
});

содержимое.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 = "";
        });
    }
});

1 Ответ

0 голосов
/ 24 июня 2019

Редактировать: условие на цели стиля, если не содержит узел 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

...