Soru Fare işaretçisinin hangi öğenin Javascript'te olduğunu belirleme


Fare imlecinin hangi öğenin bittiğini bana söyleyen bir işlev istiyorum.

Yani, örneğin, kullanıcının faresi bu textarea'nın üzerindeyse (id ile) wmd-input) window.which_element_is_the_mouse_on() işlevsel olarak eşdeğer olacak $("#wmd-input")


76
2018-01-11 01:32


Menşei




Cevaplar:


DEMO

Denilen gerçekten harika bir fonksiyon var document.elementFromPoint kulağa hoş geliyor.

İhtiyacımız olan şey, farenin x ve y koordinatlarını bulmak ve sonra bu değerleri kullanarak çağırmaktır:

var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

document.elementFromPoint

jQuery olay nesnesi


105
2018-01-11 01:42



@TikhonJelvis: Peki İşte Görüyorum ki IE ve firefox'ta destekleniyor. Bu ikisini alırsanız, genellikle hepsini alırsınız. MSDN  MDN - qwertymk
Muhteşem. Bir olay yakalamadan farenin koords almak için herhangi bir yolu var mı? (Muhtemelen varsayalım). Eğer bu mümkün değilse, maalesef bu yöntemin daha iyi olduğunu sanmıyorum event.target ya da her neyse - Tom Lehman
@HoraceLoeb Bir etkinliği yakalamadan fare kozları elde etmek mümkün değil. görmek bu so soru daha fazla açıklama için - Logan Besecker
Bunu yapmanın garip bir yolu. Bir etkinliği yakalarsanız, neden sadece kullanmıyorsunuz? event.target ? - pmrotule
Cevap ne olduğunu açıklamıyor event ve nasıl oldu - vsync


Daha yeni tarayıcılarda şunları yapabilirsiniz:

document.querySelectorAll( ":hover" );

Bu, farenin şu anda belge düzeninde bittiği bir NodeList öğesi verecektir. NodeList öğesindeki son öğe en belirgin olanıdır, her biri bir ebeveyn, büyükbaba veya daha fazlası olmalıdır.


49
2018-03-07 04:36



Sürüklenirken bu işe yaramadı. <li> diğerinin üstünde <li> elementler. - Seiyria
Bir keman yarattım $(':hover') ama temelde aynı şey: jsfiddle.net/pmrotule/2pks4tf6 - pmrotule
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })() - user
Bunun performansının korkunç olduğunu hissediyorum. mousemove performansa zarar verebilir - vsync


Her ne kadar aşağıdakiler soruyu gerçekten yanıtlayamasa da, bu googling'in ilk sonucudur (googler aynı soruyu sormayabilir :), umarım bazı ekstra girişler sağlar.

Aslında farenin şu anda bittiği tüm öğelerin bir listesini almak için iki farklı yaklaşım vardır (belki de yeni tarayıcılar için):

"Yapısal" yaklaşım - Yükselen DOM ağacı

Dherman'ın cevabında olduğu gibi, biri arayabilir

var elements = document.querySelectorAll(':hover');

Bununla birlikte, bu durum, sadece çocukların atalarını, yani genellikle doğru değil, genel olarak doğru olmadığını, özellikle de DOM ağacının farklı dallarındaki elementin birbiriyle çakışabileceği SVG ile uğraşırken üstleneceğini varsayar.

"Görsel" yaklaşım - Üst üste gelen "görsel" üzerine kurulu

Bu yöntem kullanır document.elementFromPoint(x, y) En üstteki öğeyi bulmak için, geçici olarak gizleyin (hemen aynı bağlamda kurtardığımızdan, tarayıcı bunu gerçekte oluşturmaz), sonra ikinci en üstteki öğeyi bulmaya devam edin ... Biraz hacky görünüyor, ama ne olduğunu döndürüyor Varsa, örneğin, bir ağacın içindeki kardeşlerin elemanları birbirini kapatarak beklersiniz. Lütfen bul bu gönderi daha fazla ayrıntı için,

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ı dönüşlerini kontrol edin.


32
2018-01-11 06:40



Bu bana çok yardımcı oldu. Teşekkürler @ herrlich10. Şaşırtıcı bir şekilde, kodunuz da iç içe geçmiş çocuk öğeleriyle davayı ele alır. - Vikram Deshmukh
Hoş geldiniz @ VikramDeshmukh ~ Bunu bilmek güzel :) - herrlich10
Görsel yaklaşım gerçekten harika! Teşekkürler! - Mikhail
Bu son derece kullanışlıdır. Tam olarak aradığım şey. Dediğiniz gibi, querySelectorAll her senaryoda çalışmaz. - noobsharp
@ herrlich10 Bunun için iyi bir polfill gibi görünüyor developer.mozilla.org/en-US/docs/Web/API/Document/.... Bu API, desteklenen tarayıcınızda varsa, bunu kullanabileceğinizi düşünüyorum. - dherman


Mouseover olaylar balonu, böylece vücut üzerinde tek bir dinleyici koyabilirsiniz ve onları kabarcı için bekleyin, sonra kapmak event.target veya event.srcElement:

function getTarget(event) {
    var el = event.target || event.srcElement;
    return el.nodeType == 1? el : el.parentNode;
}

<body onmouseover="doSomething(getTarget(event));">

5
2018-01-11 02:37



Kendimi evrensel olay işleyicileri kullanırken, bu daha akıllıca bir kaynak olacaktır. document.elementFromPoint(x, y). - John


<!-- 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. -->

4
2017-08-28 03:42



(Artık silindi) sorunuza işlenmekte olan kötü davranıştan dolayı özür dilerim. Şahsen çözülecek soruyu tercih ederim. Kapalı olma yolundayken (haksız bir şekilde, benim görüşüme göre), yeniden açmak için oy kullanmayı planlıyordum. Ancak, downvotes sayısı göz önüne alındığında, silinmeyi sürdürmeyi seçerseniz anlarım. - halfer


Aşağıdaki kod, fare imlecinin elemanını almanıza yardımcı olacaktır. Sonuçlanan öğeler konsolda görüntülenir.

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

4
2017-08-19 15:48



Bu, imlecin hareket etmesini gerektirir. Olabildiğince yakın, burada sorulmakta olan şey değil. - Carles Alcolea
Sayfa kaydırılırsa çalışmaz. kullanım e.clientX ve e.clientY bunun yerine (Firefox 59'da test edilmiştir). - youen


Hedefine bakabilirsin mouseover bazı uygun atalarda olay:

var currentElement = null;

document.addEventListener('mouseover', function (e) {
    currentElement = e.target;
});

İşte bir demo.


3
2018-01-11 01:36





elementFromPoint() ilk öğeyi DOM ağacında alır. Bu, geliştiricilerin ihtiyaçları için yeterli değildir. Bu nedenle bu güzel işlev var:

Document.elementsFromPoint()

Bu, verilen noktalar altında bir dizi öğe nesnesi döndürür.

Şu anda tüm tarayıcılar tarafından desteklenmeyen deneme amaçlı bir özelliktir. bu cevap geri dönüş olarak

| Chrome | Firefox | IE   | Opera | Safari
| 43.0   | 46.0    | 10.0 | ?     | No support

Daha fazla bilgi ve şu andaki tarayıcı uyumluluğu: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint


2
2017-08-04 09:45





Hedef mousemove DOM olayı, fare hareket ettiğinde imlecin altındaki en iyi 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.


1
2018-01-15 14:32





Nesneyi geri almak ve jquery nesnesi olarak değiştirmek için bu seçiciyi kullanabilirsiniz. $(':hover').last();


1
2017-08-05 16:47



Yığın Taşması'na Hoş Geldiniz! Lütfen bu kodun OP'ye neden yardımcı olduğuna dair bir açıklama ekleyin. Bu, gelecekteki görüntüleyenlerin öğrenebileceği bir yanıt sunmaya yardımcı olacaktır. Görmek Nasıl cevap daha fazla bilgi için. Ayrıca "undermouse"? - Heretic Monkey