माउस-ईवेंट के बिना jQuery में माउस की स्थिति कैसे प्राप्त करें?


101

मैं वर्तमान माउस पोजीशन प्राप्त करना चाहूंगा लेकिन मैं इसका उपयोग नहीं करना चाहता:

$(document).bind('mousemove',function(e){ 
        $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); 

क्योंकि मुझे केवल स्थिति प्राप्त करने और जानकारी को संसाधित करने की आवश्यकता है


3
.pageX और .pageY किसी भी घटना से दूर पढ़ा जा सकता है, न कि केवल .mousemove ()। उदाहरण के लिए, शायद आप यह जानना चाहते हैं कि कोई उपयोगकर्ता किसी विशेष div के अंदर कहाँ क्लिक करता है: यहाँ एक उदाहरण है जहाँ हम एक विशेष div के अंदर एक क्लिक इवेंट के लिए सुनते हैं जिसे #special कहा जाता है। ..... docs.jquery.com/…
Haim

यह आपको उत्तरदायी साइटों के लिए माउस पॉइंटर स्थान प्राप्त करने में भी मदद कर सकता है। kvcodes.com/2014/03/…
कवर्धा

जवाबों:


151

मुझे विश्वास नहीं है कि माउस स्थिति को क्वेरी करने का एक तरीका है , लेकिन आप एक mousemoveहैंडलर का उपयोग कर सकते हैं जो जानकारी को केवल दूर रखता है, इसलिए आप संग्रहीत जानकारी को क्वेरी कर सकते हैं।

jQuery(function($) {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // ELSEWHERE, your code that needs to know the mouse position without an event
    if (currentMousePos.x < 10) {
        // ....
    }
});

लेकिन लगभग सभी कोड, setTimeoutकोड के अलावा और इस तरह, एक घटना के जवाब में चलता है, और अधिकांश घटनाएं माउस की स्थिति प्रदान करती हैं। तो आपके कोड को यह जानना होगा कि माउस को संभवतः उस जानकारी तक कहां पहुंचना है ...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });के लिए माउस स्थिति अपरिभाषित रिटर्न
SPB

9
@TJCrowder काफी स्पष्ट रूप से मुझे लगता है, वह कह रहा है कि वहाँ एक घटना है जो माउस स्थिति प्रदान नहीं करती है, यह उत्तर देने के लिए कि "लगभग सभी (सभी?)" इवेंट्स माउस स्थिति प्रदान करते हैं।
फेबस्प्रो

2
@TJCrowder डिफेंस में उन्होंने कहा कि सब ठीक है। एक के साथ जवाब देकर कि यह सब उपयोगी या उद्देश्यपूर्ण नहीं है। मुझे लगता है कि इस उत्तर का बिंदु उपयोगकर्ता दिखा रहा है कि उसके उदाहरण में उसे माउस चाल का उपयोग नहीं करना है ... वह कुछ भी उपयोग कर सकता है। उपयोगकर्ता ने विशेष रूप से इसे एक घटना के बिना प्राप्त करने के लिए नहीं कहा, जो TJCrowder बताते हैं कि लगभग सभी कोड कुछ घटना के बाद होता है। बेशक वह इस बात का उल्लेख करता है कि अपने कार्य को करने के लिए एक व्यवहार्य तरीका दिखा रहा है जो उसे चाहिए। उत्तर ने मुझे वैसे भी मदद की।
टायलर

1
@ टायलर: धन्यवाद। :-) "लगभग सभी" एक बाद का बदलाव था, मेरी प्रारंभिक भाषा बहुत मजबूत थी।
टीजे क्राउडर

26

आप किसी ईवेंट का उपयोग किए बिना jQuery में माउस पोजीशन नहीं पढ़ सकते हैं। सबसे पहले ध्यान दें कि event.pageXऔर event.pageYगुण किसी भी घटना पर मौजूद हैं, इसलिए आप ऐसा कर सकते हैं:

$('#myEl').click(function(e) {
    console.log(e.pageX);
});

आपका दूसरा विकल्प एक बंद का उपयोग करने के लिए अपने पूरे कोड को एक चर पर पहुंच देने के लिए उपयोग करना है जो कि मूसमोव हैंडलर द्वारा अपडेट किया गया है:

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
}).mouseover(); // call the handler immediately

// do something with mouseX and mouseY

इसके साथ एक समस्या यह है कि जब आप फ़ायरफ़ॉक्स में खींच रहे हैं तो आपके पास पेजएक्स और पेजवाई या क्लाइंटएक्स और क्लाइंटवाई नहीं हैं ... किसी भी तरह से पेजवाई को खींचते समय?
जेम्सटैबनेट

11

मैंने इस विधि का उपयोग किया है:

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

function show_popup(str) {
    $("#popup_content").html(str);
    $("#popup").fadeIn("fast");
    $("#popup").css("top", y);
    $("#popup").css("left", x);
}

इस तरह मैं हमेशा y में सहेजे गए शीर्ष से दूरी और x में बची बाईं ओर से दूरी तय करूंगा।


6

इसके अलावा, mousemoveयदि आप किसी ब्राउज़र विंडो पर drag'n'drop प्रदर्शन करते हैं , तो घटनाओं को ट्रिगर नहीं किया जाता है। Drag'n'drop के दौरान माउस निर्देशांक को ट्रैक करने के लिए आपको document.ondragoverघटना के लिए हैंडलर संलग्न करना चाहिए और इसका उपयोग करना चाहिए ।

उदाहरण:

var globalDragOver = function (e)
{
    var original = e.originalEvent;
    if (original)
    {
        window.x = original.pageX;
        window.y = original.pageY;
    }
}


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

मुख्य ऑब्जेक्ट पर एक इवेंटलिस्ट बनाएं, मेरे मामले में डॉक्यूमेंट ऑब्जेक्ट, माउस कोर्ड्स को हर फ्रेम पर लाने और उन्हें ग्लोबल वैरिएबल में स्टोर करने के लिए, और इस तरह आप जब भी चाहें माउस वाई एंड जेड पढ़ सकते हैं।


-1

मैं इस पार आया, इसे साझा करना अच्छा होगा ...

आप लोग क्या सोचते हैं?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

और उछाल, वहाँ हम यह है ..

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.