16

ブックマークレットがあり、ユーザーがボタンをクリックすると、highligtherのような検査を開始する必要があります。これをクロスブラウザーにします。

このためには、マウスの移動中にDOM要素を検出する必要があります。この要素を取得したら、CSSで強調表示する必要があります。

マウスの移動によるDOM要素の検出に問題がありますが、これがどのように行われるかを教えていただけますか？

このDOM要素を取得したら、ユーザーをクリックしてXPathを抽出する必要があります。

4

2 に答える 2

26

またはをフックmousemoveしてから、イベントオブジェクトのプロパティを使用して、マウスが置かれている最上位の要素を見つけることができます。次に、CSSを適用するのは、おそらくクラスを追加することで最も簡単に実行できます。documentdocument.bodytarget

しかし、: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";
    }
  }

})();

ライブコピー| ソース

于 2012-06-13T08:06:06.690 に答える
6

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");
于 2012-06-13T08:07:57.100 に答える