110

मुझे एक फ़ंक्शन चाहिए जो मुझे बताता है कि माउस कर्सर किस तत्व पर है।

इसलिए, उदाहरण के लिए, यदि उपयोगकर्ता का माउस इस textarea (आईडी के साथ wmd-input) से अधिक है, तो कॉलिंग window.which_element_is_the_mouse_on()कार्यात्मक रूप से इसके बराबर होगा$("#wmd-input")

javascript dom mouse

— टॉम लेहमैन
स्रोत

148

डेमो

वहाँ एक बहुत अच्छा समारोह कहा जाता है document.elementFromPointजो ऐसा लगता है कि क्या करता है।

हमें माउस के x और y कॉर्ड्स को खोजने की आवश्यकता है और फिर उन मानों का उपयोग करके इसे कॉल करें:

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

document.elementFromPoint

jQuery इवेंट ऑब्जेक्ट

— qwertymk
स्रोत

1

@ टिखोनजेल्विस: यहाँ से मैं देख रहा हूँ कि यह IE और फ़ायरफ़ॉक्स पर समर्थित है। यदि आप उन दोनों को प्राप्त करते हैं तो आप आमतौर पर उन सभी को प्राप्त करते हैं। MSDN MDN

— qwertymk

1

बहुत बढ़िया। क्या बिना किसी घटना को पकड़े माउस के कोर्ड्स प्राप्त करने का कोई तरीका है? (शायद मैं नहीं मानता)। यदि यह संभव नहीं है, तो दुर्भाग्य से मुझे नहीं लगता कि यह विधि किसी भी तरह से बेहतर है event.targetया जो भी है

— टॉम लेहमन

1

@HoraceLoeb किसी घटना को पकड़े बिना माउस कोर्डर्स प्राप्त करना संभव नहीं है। आगे के स्पष्टीकरण के लिए इस SO प्रश्न को देखें

— लोगान बेसेकर

2

यह एक अजीब तरीका है। यदि आप एक घटना को पकड़ते हैं, तो सिर्फ उपयोग क्यों नहीं event.target?

— pmrotule

3

उत्तर यह नहीं समझाता है कि क्या eventहै, और यह कैसे हुआ

— विस्कॉन्सिन

64

नए ब्राउज़रों में, आप निम्न कार्य कर सकते हैं:

document.querySelectorAll( ":hover" );

वह आपको उन वस्तुओं का एक नोडलिस्ट देगा जो माउस वर्तमान में दस्तावेज़ क्रम में खत्म हो गया है। NodeList में अंतिम तत्व सबसे विशिष्ट है, प्रत्येक पूर्ववर्ती एक माता-पिता, दादा दादी, और इसी तरह होना चाहिए।

— dherman
स्रोत

2

जब मैं <li>अन्य <li>तत्वों के शीर्ष पर थोड़ी देर खींच रहा था तो यह काम नहीं कर रहा था ।

— सियारिया

2

मैंने $(':hover')इसके साथ एक

— फिडेल

3

(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()

— उपयोगकर्ता

3

मुझे लग रहा है कि इसका प्रदर्शन बहुत ही भयानक है .. इस पर फोन करने से mousemoveप्रदर्शन प्रभावित हो सकता है

— vsync

49

हालांकि निम्नलिखित वास्तव में सवाल का जवाब नहीं दे सकता है, क्योंकि यह googling का पहला परिणाम है (googler वास्तव में एक ही सवाल नहीं पूछ सकता है :), उम्मीद है कि यह कुछ अतिरिक्त इनपुट प्रदान करेगा।

माउस को वर्तमान में समाप्त होने वाले सभी तत्वों की सूची प्राप्त करने के लिए वास्तव में दो अलग-अलग दृष्टिकोण हैं (नए ब्राउज़रों के लिए, शायद):

"संरचनात्मक" दृष्टिकोण - आरोही डोम वृक्ष

जैसे कि धीमान के उत्तर में, कोई भी कॉल कर सकता है

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

हालांकि, यह मानता है कि केवल बच्चे अपने पूर्वजों को ओवरले करेंगे, जो आमतौर पर मामला है, लेकिन सामान्य रूप से सच नहीं है, खासकर जब एसवीजी से निपटना होता है जहां डोम पेड़ की विभिन्न शाखाओं में तत्व एक दूसरे को ओवरलैप कर सकते हैं।

"दृश्य" दृष्टिकोण - "दृश्य" ओवरलैपिंग पर आधारित है

यह विधि 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;
}

दोनों का प्रयास करें, और उनके अलग-अलग रिटर्न की जांच करें।

— herrlich10
स्रोत

इसने मेरी बहुत मदद की। धन्यवाद @ herrlich10 हैरानी की बात है, आपका कोड नेस्टेड बच्चों के तत्वों के साथ भी मामला संभालता है।

— विक्रम देशमुख

यह अत्यंत उपयोगी है। ठीक वही जो मेरे द्वारा खोजा जा रहा था। जैसा कि आपने कहा, querySelectorAll हर परिदृश्य में काम नहीं करता है।

— noobsharp

4

@ herrlich10 यह डेवलपर . mozilla.org/en-US/docs/Web/API/Document/… के लिए एक सभ्य पॉलीफिल की तरह लगता है । यदि वह API आपके समर्थित ब्राउज़र में मौजूद है, तो मुझे लगता है कि आप उसका उपयोग कर सकते हैं।

— dherman

इसके लिए धन्यवाद - बहुत अधिक काम करता है जितना कि expetced (हालांकि कोई तत्व नहीं है। GetElementsFromPoint के साथ कंप्रेशर्स के लिए), लेकिन यह एक प्रकार से धीमा है (क्रोम में मेरे परीक्षण में प्रति कॉल 18-20ms) जो उस परिदृश्य में उपयोग करना मुश्किल बनाता है जो मुझे अंदर था मन (एक अधिक बुनियादी घटना संचालित दृष्टिकोण का उपयोग करते समय एक मामले में एक खींचें के दौरान ड्रॉप लक्ष्य को खोजने योग्य नहीं है)।

— jsdw

1

देखें Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828

— कार्ल एडलर

21

elementFromPoint()DOM ट्री में केवल पहला तत्व मिलता है। यह ज्यादातर डेवलपर्स की जरूरतों के लिए पर्याप्त नहीं है। वर्तमान माउस पॉइंटर पोजीशन में एक से अधिक तत्व प्राप्त करने के लिए यह वह फ़ंक्शन है जिसकी आपको आवश्यकता है:

document.elementsFromPoint(x, y) . // mind the 's' in elements

यह दिए गए बिंदु के तहत सभी तत्व वस्तुओं की एक सरणी देता है। बस इस फ़ंक्शन के लिए माउस X और Y मान पास करें।

यहाँ अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

बहुत पुराने ब्राउज़रों के लिए जो समर्थित नहीं हैं, आप इस उत्तर का उपयोग कमबैक के रूप में कर सकते हैं ।

— कार्ल एडलर
स्रोत

3

यह अब 2018 में अच्छी तरह से समर्थित है।

— लड़के

6

माउसओवर ईवेंट बबल, इसलिए आप शरीर पर एक एकल श्रोता रख सकते हैं और उनके बबल में आने की प्रतीक्षा कर सकते हैं, 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));">

— RobG
स्रोत

जबकि मैं खुद सार्वभौमिक ईवेंट हैंडलर का उपयोग करता हूं, यह इससे अधिक महंगा संसाधन वार होगा document.elementFromPoint(x, y)।

— जॉन

6

निम्नलिखित कोड आपको माउस पॉइंटर का तत्व प्राप्त करने में मदद करेगा। परिणामी तत्व कंसोल में प्रदर्शित होंगे।

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

— सैइकुमर
स्रोत

1

इसके लिए कर्सर को ले जाना आवश्यक है। जितना करीब हो सकता है, उतना यहां नहीं है।

— कार्स अल्केला

यदि पृष्ठ स्क्रॉल किया गया है तो काम नहीं करता है। उपयोग करें e.clientXऔर e.clientYइसके बजाय (फ़ायरफ़ॉक्स 59 पर परीक्षण किया गया)।

— यूएन

5

आप mouseoverकुछ उपयुक्त पूर्वजों पर घटना के लक्ष्य को देख सकते हैं :

var currentElement = null;

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

यहाँ एक डेमो है।

— रिया-
स्रोत

4

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

— डिप एम
स्रोत

3

मैं आपके द्वारा (अब हटाए गए) प्रश्न पर जिस तरीके से आपके साथ व्यवहार किया गया था, उसके लिए मैं माफी माँगता हूँ। व्यक्तिगत रूप से मैं इस सवाल को छोड़ देना पसंद करूंगा। जब भी यह बंद हो रहा था (गलत तरीके से, मेरे विचार में), मैं इसे फिर से खोलने के लिए मतदान की योजना बना रहा था। हालांकि, डाउनवोट्स की संख्या को देखते हुए, मैं समझता हूं कि क्या आप इसे हटाए रखना चुनते हैं।

— रोकें

3

DEMO: D अपने माउस को स्निपेट विंडो में ले जाएं: D

<script>
document.addEventListener('mouseover', function (e) {
	  console.log ("You are in ",e.target.tagName);
});
</script>

स्निपेट का विस्तार करें

— Zibri
स्रोत

1

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 वाल्टन के समाधान के समान है, लेकिन इसे jQuery या एक सेटइंटरवल की आवश्यकता नहीं है।

— मैक्स हाइबर
स्रोत

1

आप इस चयनकर्ता का उपयोग ऑब्जेक्ट को कम करने और उसे jquery ऑब्जेक्ट के रूप में हेरफेर करने के लिए कर सकते हैं। $(':hover').last();

— सर्ज गोर्डीव
स्रोत

4

ढेर अतिप्रवाह में आपका स्वागत है! कृपया कुछ स्पष्टीकरण जोड़ें कि यह कोड ओपी की मदद क्यों करता है। यह एक उत्तर प्रदान करने में मदद करेगा जिससे भविष्य के दर्शक सीख सकते हैं। अधिक जानकारी के लिए उत्तर कैसे देखें । इसके अलावा, "अंडरमाउस"?

— हेरिटिक बंदर

0

मुझे यह कहकर शुरू करें कि मैं जिस विधि के बारे में सुझाव देने वाला हूं, उसका उपयोग करने की अनुशंसा नहीं करता। यह काफी बेहतर केवल तत्वों आप जानने में दिलचस्पी है या नहीं, माउस के साथ खत्म हो गया है कर रहे हैं करने के लिए करने के लिए उपयोग घटना संचालित विकास और बाँध की घटनाओं है 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हर सेकंड को कॉल करता है और लॉग किस कंसोल पर माउस वर्तमान में खत्म हो जाता है।

http://jsfiddle.net/LWFpJ/1/

— फिलिप वाल्टन
स्रोत

0

पुराना सवाल लेकिन उन लोगों के लिए एक समाधान है जो अभी भी संघर्ष कर रहे हैं। आप 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)
});

कोडन पर डेमो

— UZOR
स्रोत

निर्धारित करें कि कौन सा तत्व माउस पॉइंटर जावास्क्रिप्ट में सबसे ऊपर है

डेमो

"संरचनात्मक" दृष्टिकोण - आरोही डोम वृक्ष

"दृश्य" दृष्टिकोण - "दृश्य" ओवरलैपिंग पर आधारित है