जावास्क्रिप्ट: मूल तत्व से संबंधित माउस स्थिति प्राप्त करें

Question

क्या इसके मूल तत्व से संबंधित माउस स्थिति प्राप्त करने का कोई तरीका है?

चलो कहते हैं कि मैं एक संरचना है दो:

<div id="parent"> 
    <span class="dot"></span> 
</div> 

जब मैं span तत्व मैं अपनी मूल तत्व (<div id="parent">) में अपनी स्थिति प्राप्त करने की आवश्यकता पर मेरे माउस लाने के लिए। पेजएक्स/क्लाइंटएक्स मुझे पेज/क्लाइंट एरिया के सापेक्ष स्थिति देता है, इसलिए यह मेरे लिए काम नहीं कर रहा है।

Answer 1

संबंधित स्थिति प्राप्त करने के लिए माउस स्थिति (पेजएक्स; पृष्ठ वाई) से मूल तत्व (ऑफसेट लेफ्ट; ऑफसेटटॉप) की स्थिति घटाएं। यदि आपके पास ऑफ़सेट के कई स्तर हैं तो ऑफसेट को ध्यान में रखना याद रखें।

उदाहरण के लिए:

element.addEventListener("mousedown", function (e) { 
    let x = e.pageX - parent.offsetLeft; 
    let y = e.pageY - parent.offsetTop; 

    console.log(x, y); 
}); 

कहाँ element अपने भीतर तत्व घटना प्राप्त है, और parent निर्देशांक के लिए अपनी इच्छित संदर्भ है।

Answer 2

ऑफ़सेट अभिभावक संपत्ति का प्रयास करें। http://help.dottoro.com/ljetdvkl.php

इस प्रयास करें: positionX = document.getElementById ('childId') offsetParent.offsetLeft;। positionY = document.getElementByID ('childId')। ऑफसेट पेरेंट.ऑफसेट लिफ्ट;

Answer 3

jQuery ऑफसेट() विधि माता पिता स्थिति संभालती है, इसलिए

function onsomemouseevent(e) { 
    var x = e.pageX - $(e.target).offset().left; 
} 

सादा ब्राउज़र पृथक jQuery है।