JQuery का उपयोग करके लक्ष्य तत्व पर क्लिक निर्देशांक कैसे प्राप्त करें

109

मेरे HTML तत्व के लिए मेरे पास निम्न ईवेंट हैंडलर है

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

मुझे क्लिक करने के समय # तलाश-बार पर माउस की स्थिति का पता लगाना होगा। मैंने सोचा होगा कि उपरोक्त कोड काम करना चाहिए, लेकिन यह गलत परिणाम देता है

— रोमन
स्रोत

4

तत्व, व्यूपोर्ट या संपूर्ण दस्तावेज के सापेक्ष स्थिति?

— जेम्स

मैंने इसे e.layerX - e.target.offsetLeft का उपयोग करके काम किया और Oprea के लिए अभी इस्तेमाल किया e.offsetX

— रोमन

यदि आप इसे एक उत्तरदायी साइट पर प्राप्त करना चाहते हैं। इस लेख को आज़माएं, आप इसे संवेदनशील साइटों पर भी प्राप्त कर सकते हैं। kvcodes.com/2014/03/…

— कवर्धा

235

क्या आप माउस पॉइंटर की स्थिति को relative(या) केवल माउस पॉइंटर स्थान पर लाने का प्रयास कर रहे हैं।

इस डेमो की कोशिश करें: http://jsfiddle.net/AMsK9/

संपादित करें:

1) event.pageX, event.pageYआपको माउस स्थिति सापेक्ष दस्तावेज देता है!

रेफरी : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): यह किसी तत्व की ऑफसेट स्थिति देता है

रेफरी : http://api.jquery.com/offset/

3) position(): यह आपको एक तत्व का सापेक्ष स्थान देता है, अर्थात

विचार करें कि एक तत्व दूसरे तत्व के अंदर सन्निहित है

उदाहरण :

<div id="imParent">
   <div id="imchild" />
</div>

रेफरी : http://api.jquery.com/position/

एचटीएमएल

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

जावास्क्रिप्ट

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});

9

उदाहरणों के लिए +1 ... एक नोट, हालांकि मैं यहां कोड भी जोड़ूंगा, अगर आपका लिंक मर जाता है तो यह प्रश्न भविष्य में बेकार हो जाता है, मैं प्रत्येक के लिए कोड डालूंगा और यहां संक्षिप्त विवरण :)

— निक क्रेवर

2

का मामला करने का एक सरल तरीका है '#B': e.offsetXऔर e.offsetY। मुझे लगता है कि आप इसे संपादित करना चाहेंगे। मैंने पहले ही यहाँ फ़िडेल को अपडेट कर दिया है । मुझे यह समाधान पोस्ट के लिए धन्यवाद मिला, इसलिए धन्यवाद।

— toto_tico

धन्यवाद, क्योंकि मैं व्यक्तिगत रूप से ऑफसेट () और स्थिति (), किसी को जरूरत आगे स्पष्टीकरण के लिए के साथ भ्रमित पढ़ सकते हैं stackoverflow.com/questions/3202008/... सुविधा के लिए

— simongcc

मेरे पास नीचे तक एक तत्व था - जो 100% चौड़ाई वाला था, इसलिए मैंने इसके बजाय पॉज़ के रूप में विंडो की चौड़ाई का उपयोग किया - इसलिए मैं यह निर्धारित करने में सक्षम था कि क्या कोई उपयोगकर्ता "एक्स" क्लिपिंग कर रहा है जो कि इसके साथ बनाया गया था: सीएसएस नियम के बाद: शीर्ष दाएं कोने में था।

— अमूरेल

महान उदाहरण है, लेकिन स्पष्ट नहीं है कि .position () और .offset () के बीच अंतर क्या है। आपको कुछ अभिभावक पदों के साथ कुछ मूल स्थिति में तत्व #C को लपेटना चाहिए, यह देखने के लिए कि #C पर क्लिक करने से उस तत्व के अंदर आपकी माउस स्थिति वापस आ जाती है, जो #C के जनक है, जो संभवतः कम से कम अक्सर उपयोगी होता है।

— एमिक

15

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});

— निसार
स्रोत

3

इसे इस्तेमाल करे:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

यहाँ आप डेमो के साथ अधिक जानकारी पा सकते हैं

— Krunal
स्रोत

1

प्रतिशत में:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

— l2aelba
स्रोत

1

यदि MouseEvent.offsetX है समर्थित (सभी प्रमुख ब्राउज़रों वास्तव में इसे समर्थन) आपके ब्राउज़र द्वारा, jQuery घटना वस्तु इस संपत्ति में शामिल होंगे।

MouseEvent.offsetX रीड-ओनली प्रॉपर्टी उस इवेंट और टारगेट नोड के पैडिंग एज के बीच माउस पॉइंटर के X कोऑर्डिनेट में ऑफसेट प्रदान करता है।

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— मेमेट ऑलसेन
स्रोत

0

यहां देखें लिंक विवरण यहां दर्ज करें

एचटीएमएल

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

सीएसएस

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jQuery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— AirBlack
स्रोत