выделите элемент DOM над мышью, например, проверите

Question

У нас есть букмарклет, и пользователь нажимает кнопку и проверяет, как высокопоставленный человек должен задеть. Мы хотим, чтобы это было кросс-браузер.

Для этого нам нужно определить элемент DOM во время перемещения мыши, и как только мы получим этот элемент, нам нужно выделить CSS.

У нас есть проблемы с обнаружением элемента DOM движением мыши, можете ли вы провести нас так, как это делается?

Как только у нас есть этот элемент DOM, при щелчке пользователя нам нужно извлечь XPath.

Answer 1

Вы можете подключить mousemove на document или document.body, а затем использовать target свойство объекта события, чтобы выяснить, верхний элемент мыши находится над. Тогда применение CSS к нему, вероятно, легче всего сделать, добавив к нему класс.

Но мне интересно, если :hover псевдо-класс может спасти вас некоторые проблемы ...

Если вы не используете :hover, вот пример:

(function() { 
    var prev; 

    if (document.body.addEventListener) { 
    document.body.addEventListener('mouseover', handler, false); 
    } 
    else if (document.body.attachEvent) { 
    document.body.attachEvent('mouseover', function(e) { 
     return handler(e || window.event); 
    }); 
    } 
    else { 
    document.body.onmouseover = handler; 
    } 

    function handler(event) { 
    if (event.target === document.body || 
     (prev && prev === event.target)) { 
     return; 
    } 
    if (prev) { 
     prev.className = prev.className.replace(/\bhighlight\b/, ''); 
     prev = undefined; 
    } 
    if (event.target) { 
     prev = event.target; 
     prev.className += " highlight"; 
    } 
    } 

})(); 

Live copy | source

Answer 2

С помощью JQuery вы можете сделать что-то вроде этого

$('*').hover(
    function(e){ 
     $(this).css('border', '1px solid black'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    },function(e){ 
     $(this).css('border', 'none'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 
); 

С помощью этого кода в вашем букмарклет, вы можете загрузить то, что когда-либо код

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");