làm nổi bật phần tử DOM trên chuột, như kiểm tra

Question

Chúng tôi có một bookmarklet và người dùng nhấp vào nút và kiểm tra như highligther cần phải khởi động. Chúng tôi muốn đây là trình duyệt chéo.

Vì điều này, chúng tôi cần phát hiện phần tử DOM trong khi di chuyển chuột và khi chúng tôi có yếu tố này, chúng tôi cần đánh dấu bằng CSS.

Chúng tôi gặp sự cố khi phát hiện phần tử DOM bằng cách di chuyển chuột, bạn có thể hướng dẫn chúng tôi cách thực hiện điều này không?

Khi chúng tôi có phần tử DOM này, khi người dùng nhấp vào, chúng tôi cần trích xuất XPath.

Answer 1

Bạn có thể móc mousemove trên document hoặc document.body, sau đó sử dụng thuộc tính target của đối tượng sự kiện để tìm ra phần tử trên cùng của con chuột. Sau đó áp dụng CSS cho nó có lẽ dễ dàng nhất được thực hiện bằng cách thêm một lớp vào nó.

Nhưng tôi tự hỏi, nếu psuedo-class :hover có thể giúp bạn tiết kiệm một số rắc rối ...

Nếu không sử dụng :hover, đây là một ví dụ:

(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

Với sự giúp đỡ của jquery bạn có thể làm một cái gì đó như thế này

$('*').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; 
    } 
); 

Với mã này trong bookmarklet của bạn, bạn có thể tải những gì bao giờ hết đang

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