回答:
document.elementFromPointそれがどのように聞こえるかを実行する呼ばれる本当にクールな関数があります。
必要なのは、マウスのx座標とy座標を見つけて、それらの値を使用して呼び出すことです。
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetか何
event.targetですか？
event、およびそれがどのようになったかを説明していません
新しいブラウザでは、次のことができます。
document.querySelectorAll( ":hover" );これにより、マウスが現在ドキュメントの上にある項目のNodeListが表示されます。NodeListの最後の要素は最も具体的であり、先行する各要素は親、祖父母などである必要があります。
<li>、他の<li>要素の上にしばらくドラッグしている間は機能しなかったようです。
$(':hover')が、基本的には同じです：jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemoveパフォーマンスが低下する可能性があります
以下は実際には質問に答えない場合がありますが、これはグーグルの最初の結果であるため（グーグルはまったく同じ質問をしない可能性があります）、追加の入力が提供されることを願っています。
マウスが現在置かれているすべての要素のリストを取得するには、実際には2つの異なる方法があります（おそらく新しいブラウザーの場合）。
ダーマンの答えと同じように、
var elements = document.querySelectorAll(':hover');ただし、これは子だけが祖先をオーバーレイすることを前提としています。これは通常の場合ですが、特にDOMツリーの異なるブランチの要素が互いにオーバーラップする可能性があるSVGを処理する場合は一般に当てはまりません。
このメソッドはdocument.elementFromPoint(x, y)、最上位の要素を見つけて一時的に非表示にし（同じコンテキストですぐに回復するため、ブラウザは実際にはこれをレンダリングしません）、次に最上位の要素を検索します...少しハックに見えますが、たとえば、ツリー内に兄弟要素が互いに隠れている場合に、期待どおりの結果を返します。詳細については、この投稿を見つけてください。
function allElementsFromPoint(x, y) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.elementFromPoint(x, y);
if (!element || element === document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}両方を試して、それぞれの収益を確認してください。
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828を
elementFromPoint()DOMツリーの最初の要素のみを取得します。これはほとんどの場合、開発者のニーズには十分ではありません。たとえば現在のマウスポインターの位置で複数の要素を取得するには、次の関数が必要です。
document.elementsFromPoint(x, y) . // mind the 's' in elementsこれは、指定されたポイントの下にあるすべての要素オブジェクトの配列を返します。マウスのXとYの値をこの関数に渡すだけです。
詳細はこちら：https : //developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
サポートされていない非常に古いブラウザの場合、この回答をフォールバックとして使用できます。
マウスオーバーイベントはバブルするので、1つのリスナーをボディに配置し、それらがバブルアップするのを待ってから、event.targetまたはevent.srcElement：
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">document.elementFromPoint(x, y)ます。
次のコードは、マウスポインターの要素を取得するのに役立ちます。結果の要素はコンソールに表示されます。
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXおよびe.clientYを使用してください（Firefox 59でテスト済み）。
<!-- One simple solution to your problem could be like this: -->
<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn't test it for Safari. -->mousemoveDOMイベントのターゲットは、マウスが移動したときにカーソルの下にある最上位のDOM要素です。
(function(){
//Don't fire multiple times in a row for the same element
var prevTarget=null;
document.addEventListener('mousemove', function(e) {
//This will be the top-most DOM element under cursor
var target=e.target;
if(target!==prevTarget){
console.log(target);
prevTarget=target;
}
});
})();これは@Philip Waltonのソリューションに似ていますが、jQueryやsetIntervalは必要ありません。
このセレクターを使用してアンダーマウスオブジェクトを作成し、jqueryオブジェクトとして操作することができます。 $(':hover').last();
まず、これから提案する方法の使用はお勧めしません。それが唯一あなたがマウスで終わっているかどうかを知ることに興味を持っている要素に使用するイベント駆動型開発とバインドイベントにはるかに良いですmouseover、mouseout、mouseenter、mouseleave、など
マウスがどの要素の上にあるかを確実に知る必要がある場合は、mouseoverイベントをDOM内のすべてにバインドする関数を記述し、現在の要素を変数に格納する必要があります。
次のようにすることができます：
window.which_element_is_the_mouse_on = (function() {
var currentElement;
$("body *").on('mouseover', function(e) {
if(e.target === e.currentTarget) {
currentElement = this;
}
});
return function() {
console.log(currentElement);
}
}());基本的に、すべての要素にイベントを設定し、現在の要素をクロージャー内に格納してフットプリントを最小限に抑える即時関数を作成しました。
これは呼び出す呼び出しデモです window.which_element_is_the_mouse_on毎秒れ、マウスが現在コンソールにある要素をログに記録する。
古い質問ですが、まだ苦労している可能性のある人のための解決策があります。mouseover検出したい子要素の「親」要素にイベントを追加したい。以下のコードはそれをどうやってやるかを示しています。
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});