Fare imlecinin hangi öğenin üzerinde olduğunu söyleyen bir işlev istiyorum.
Bu nedenle, örneğin, kullanıcının faresi bu metin alanının üzerindeyse (kimlikli wmd-input), arama window.which_element_is_the_mouse_on()işlevi ile eşdeğer olacaktır $("#wmd-input").
Yanıtlar:
document.elementFromPointKulağa benzeyen şeyi yapan gerçekten harika bir işlev var .
İhtiyacımız olan şey, farenin x ve y koordinatlarını bulmak ve sonra onu bu değerleri kullanarak çağırmaktır:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetya da her neyse olduğunu düşünmüyorum
event.target?
eventolduğunu ve nasıl ortaya çıktığını açıklamıyor
Daha yeni tarayıcılarda şunları yapabilirsiniz:
document.querySelectorAll( ":hover" );Bu size farenin şu anda belge sırasına göre üzerinde olduğu öğelerin bir Düğüm Listesini verecektir. DüğümListesindeki son öğe en spesifik olandır, önceki her bir öğe bir üst, büyükbaba vb. Olmalıdır.
<li>süre diğer <li>öğelerin üzerine sürüklerken işe yaramadı .
$(':hover')ama temelde aynı şey: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovezarar verebilir
Aşağıdakiler soruyu gerçekten yanıtlamasa da, bu, googling'in ilk sonucu olduğundan (Google çalışanı tam olarak aynı soruyu sormayabilir :), umarım fazladan girdi sağlar.
Farenin şu anda üzerinde olduğu tüm öğelerin bir listesini almak için aslında iki farklı yaklaşım vardır (belki daha yeni tarayıcılar için):
Olduğu gibi dherman cevabı , tek çağırabilirsiniz
var elements = document.querySelectorAll(':hover');Bununla birlikte, bu, yalnızca çocukların atalarının üst üste geleceğini varsayar, bu genellikle böyledir, ancak genel olarak doğru değildir, özellikle DOM ağacının farklı dallarındaki öğelerin birbiriyle çakışabileceği SVG ile uğraşırken.
Bu yöntem document.elementFromPoint(x, y), en üstteki öğeyi bulmak, geçici olarak gizlemek için kullanır (aynı bağlamda hemen kurtardığımız için, tarayıcı bunu gerçekten oluşturmayacaktır), ardından en üstteki ikinci öğeyi bulmaya devam eder ... Biraz karmaşık görünüyor, ancak örneğin, bir ağaçta birbirini tıkayan kardeş öğeler olduğunda beklediğiniz şeyi döndürür. Daha fazla ayrıntı için lütfen bu gönderiyi bulun ,
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;
}İkisini de deneyin ve farklı getirilerini kontrol edin.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()DOM ağacındaki yalnızca ilk öğeyi alır. Bu çoğunlukla geliştiricilerin ihtiyaçları için yeterli değildir . Örneğin mevcut fare işaretçisi konumunda birden fazla öğe elde etmek için ihtiyacınız olan işlev budur:
document.elementsFromPoint(x, y) . // Mind the 's' in elementsBu, verilen nokta altındaki tüm eleman nesnelerinin bir dizisini döndürür. Fare X ve Y değerlerini bu işleve aktarmanız yeterlidir.
Daha fazla bilgi burada: DocumentOrShadowRoot.elementsFromPoint ()
Desteklenmeyen çok eski tarayıcılar için, bu yanıtı bir geri dönüş olarak kullanabilirsiniz .
Olay balonunun üzerine fareyle gelin, böylece vücuda tek bir dinleyici yerleştirebilir ve bunların kabarmasını bekleyebilir, ardından event.targetveya 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).
Aşağıdaki kod, fare işaretçisinin öğesini elde etmenize yardımcı olacaktır. Ortaya çıkan öğeler konsolda görüntülenecektir.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXve e.clientYkullanın (Firefox 59'da test edilmiştir).
mouseoverBazı uygun atalarda olayın hedefine bakabilirsiniz :
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});<!-- 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. -->Farenizi pasaj penceresinde hareket ettirin: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ", e.target.tagName);
});
</script>mousemoveDOM olayının hedefi , fare hareket ettiğinde imlecin altındaki en üstteki DOM öğesidir:
(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;
}
});
})();Bu, @Philip Walton'ın çözümüne benzer, ancak jQuery veya setInterval gerektirmez.
Bu seçiciyi nesnenin altını oymak ve ardından onu bir jQuery nesnesi olarak değiştirmek için kullanabilirsiniz:
$(':hover').last();İşte hala mücadele ediyor olabilecekler için bir çözüm. mouseoverAlgılanmasını istediğiniz alt öğe (ler) in 'ana' öğesine bir olay eklemek istiyorsunuz. Aşağıdaki kod, bunu nasıl yapacağınızı gösterir.
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)
});Önermek üzere olduğum yöntemi kullanmanızı önermediğimi söyleyerek başlayayım. Sadece fare ile üzerine olup olmadığını bilmeden ilgilenen konum öğelere kullanım olay güdümlü geliştirme ve bağlama olaylara çok daha iyi mouseover, mouseout, mouseenter, mouseleave, vb
Kesinlikle Eğer gerekir fare üzerinde olan eleman bilmek yeteneği var, bağlar bir işlevi iletişim kurmanız gerekir mouseoversonra DOM her şeye olay ve mevcut eleman bazı değişkende ne olursa olsun saklayın.
Bunun gibi bir şey yapabilirsin:
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);
}
}());Temel olarak, etkinliği tüm öğeler üzerinde ayarlayan ve ayak izinizi en aza indirgemek için mevcut öğeyi kapanışta depolayan anında bir işlev oluşturdum.
İşte window.which_element_is_the_mouse_onher saniye çağıran ve farenin şu anda hangi öğenin konsolda olduğunu kaydeden çalışan bir demo .