15

JavaScript と jquery を使用して、Web サイト用の分割テスト ツールを構築しています。ここで、カーソルがプレビューボックスの要素の上を通過したときに、スプリットテストしたい要素ごとに小さなホバーメニューを表示したいと思います。このようなことをする可能性はありますか? 私はこのようなことをしました

$('body').hover(function(event){
    console.log(event.target.nodeName);
    // to see if it's showing up the element   
});

しかし、それは一度だけトリガーされます。アンカー要素のメニューも表示したいので、クリックを使用したくないので、少し迷っています

4

5 に答える 5

15

マウスではなくキーボードを使用している場合: jQuery ではなく、興味のある方のために単純な JavaScript を使用します。

getSelection().getRangeAt(0).commonAncestorContainer.parentNode
于 2015-05-08T22:30:38.303 に答える
14

これに使用できますdocument.elementFromPoint。

var element = document.elementFromPoint(x, y);

例：

$('body').hover(function(event){
    var el = document.elementFromPoint(event.pageX, event.pageY);
});

ドキュメント：https ：//developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint

于 2013-01-22T17:19:44.130 に答える
12

mousemoveイベントの代わりにここでイベントを使用したいと思いますhover。

$('body').mousemove(function(evt){
    console.log(evt.target);
});

mousemove細心の注意を払って使用することを忘れないでください。

ここで例を見てください。

于 2013-01-22T17:27:27.523 に答える
1

これには 3 つの方法があります。

  1. そんな感じ：

    $('body').on('mousemove', function() {
 console.log($(':hover').last().attr('name'));
});

  2. デバッグの目的で、Chrome コンソールで入力するだけで、目的の$(':hover').last() 場所にマウスをホバーし、Enter キーを押してこのコンソール コマンドを実行できます。

  3. 常時使用したい場合は、mousemove イベントを使用しないことをお勧めします。そのようなものを使用してください

    $('.one_of_your_trigger_element').on('mouseenter', function() {
 var hover_element = $(':hover').last();
 ...
});
于 2016-08-05T15:13:51.907 に答える
0

以下のコーディングを試してみてください...

    <body onMouseMove="javaScript:mouseEventHandler(event);">

    <script>
    function mouseEventHandler(mEvent) {
// Internet Explorer
                alert(mEvent.srcElement.nodeName); //Display Node Name
                alert(mEvent.srcElement.id); //Display Element ID
//FireFox
                alert(mEvent.target.nodeName);//Display Node Name
                alert(mEvent.target.id);//Display Element ID
            }
    </script>
于 2013-01-22T17:38:59.167 に答える