घटनाओं के बिना माउस को कैसे प्राप्त करें (माउस को स्थानांतरित किए बिना)?

Question

क्या किसी माउस मूवमेंट इवेंट (माउस को हिलाए बिना) के बिना पेज लोड होने के बाद जावास्क्रिप्ट के साथ माउस की स्थिति प्राप्त करना संभव है?

Comments

मूसमोव घटना के साथ कुछ भी गलत नहीं है। बस कुछ मामलों में उपयोगकर्ता माउस को स्थानांतरित नहीं करते हैं। आपके उत्तर के लिए धन्यवाद।

— नोर्बर्ट तमस

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

— पीटर हैनसेन

@CrescentFresh कुछ मामलों में (उपयोगकर्ताओं की तरह) आप कई mousemoveघटनाओं को जोड़कर ब्राउज़र को धीमा नहीं करना चाहते हैं।

— टॉम ज़ातो -

माउसओवर के साथ FF में संभव है, लेकिन IE और क्रोम में नहीं है।

— एलाड

या, एक गेम में, आपका कैमरा गेम की दुनिया में घूमता है और चरित्र माउस (विशिष्ट टॉप-डाउन शूटर स्टाइल) को देख रहा है, लेकिन यदि उपयोगकर्ता माउस नहीं हिलाता है, तो यह गलत बिंदु के आसपास केंद्र करता है जैसे कि आप चारों ओर चलते हैं आप केवल मूसमव पर भरोसा करते हैं। हालाँकि, यह कोई बड़ी बात नहीं है, हम सिर्फ पॉइंटर के "विश्व" कोर्ड्स को स्टोर करते हैं और लोगों को क्वेरी करते हैं।

— kamranicus

Answer 1

वास्तविक उत्तर: नहीं, यह संभव नहीं है।

ठीक है, मैंने अभी एक तरीका सोचा है। अपने पृष्ठ को एक div के साथ ओवरले करें जो पूरे दस्तावेज़ को कवर करता है। उसके अंदर, 2,000 x 2,000 <a>तत्वों को बनाएं (कहें) (ताकि :hoverछद्म वर्ग IE 6 में काम करेगा, देखें), आकार में प्रत्येक 1 पिक्सेल। :hoverउन <a>तत्वों के लिए एक सीएसएस नियम बनाएं जो एक संपत्ति को बदलते हैं (चलो कहते हैं font-family)। अपने लोड हैंडलर में, 4 मिलियन <a>तत्वों में से प्रत्येक के माध्यम से चक्र , जाँच currentStyle/ getComputedStyle()जब तक आप होवर फ़ॉन्ट के साथ एक नहीं पाते। दस्तावेज़ के भीतर समन्वय प्राप्त करने के लिए इस तत्व से वापस निकालें।

एनबी ने ऐसा नहीं किया ।

Comments

हा हा - कुछ बिंदु पर आपको चारों ओर Google करना चाहिए और देखना चाहिए कि क्या आप यह पता लगा सकते हैं कि वास्तव में कितने लोगों ने इसे लागू किया है

— Pointy

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

— मचिनडाइक्ट

शायद यह द्विआधारी खोज के साथ व्यावहारिक बनाया जा सकता है? <a>दिए गए आयतों को कवर करने वाले तत्वों की एक जोड़ी बनायें (आकार <img>तत्वों की पूर्ण स्थिति का उपयोग करके , मुझे लगता है), हर बार आयताकार को सिकोड़ते हुए। हां, यह हास्यास्पद है, लेकिन इसलिए यह जानकारी पहले mousemove से पहले प्राप्त करने में सक्षम नहीं है।

— डेरियस बेकन

stackoverflow.com/a/8543879/27024 का कहना है कि होवर तब तक फायर नहीं करता जब तक कि माउस पहली बार नहीं चलता। यह इस योजना को विफल करता है।

— दारा बेकन

@ डारिएबाकॉन: यह जुड़ा हुआ उत्तर सही नहीं लगता है: jsbin.com/utocax/3 । तो हाँ, यह दृष्टिकोण कुछ स्थितियों के लिए व्यावहारिक हो सकता है।

— टिम डाउन

Answer 2

संपादित करें 2020: यह किसी भी अधिक काम नहीं करता है । ऐसा लगता है, कि ब्राउज़र विक्रेताओं ने इसे बाहर निकाल दिया। क्योंकि अधिकांश ब्राउज़र क्रोमियम पर भरोसा करते हैं, यह इसके मूल में हो सकता है।

पुराना उत्तर: आप माउस को भी हुक कर सकते हैं (यह घटना पृष्ठ पुनः लोड होने के बाद निकाल दी जाती है, जब मूसकसर पृष्ठ के अंदर होता है)। दूषित कोड का विस्तार करना चाहिए:

var x = null;
var y = null;
    
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);
    
function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

आप x और y को mouseleave-event पर शून्य करने के लिए भी सेट कर सकते हैं। इसलिए आप यह जांच सकते हैं कि उपयोगकर्ता आपके पेज पर कर्सर के साथ है या नहीं।

Comments

यह यहां केवल सही मायने में उपयोगी उत्तर प्रतीत होगा, जो अजीब लगता है। वास्तव में (नवीनतम फ़ायरफ़ॉक्स, क्रोम और IE11 में) माउसइंटर पेज लोड पर आग लगाता है और सही निर्देशांक प्रदान करता है। क्या इस क्षेत्र में ब्राउज़र व्यवहार पिछले कुछ वर्षों में बदल गया है?

— पीटर हैनसेन

वास्तव में "माउसएंटर" कोई मूल्य नहीं जोड़ता है। मैंने क्रोम और IE में निम्नलिखित jsfiddle के साथ परीक्षण किया, और जब तक आप माउस को आंतरिक दस्तावेज़ (परिणाम पैनल) पर नहीं डालते, तब तक कॉर्डिनेट नहीं दिखाते हैं: jsfiddle.net/xkpd784o/1

— Mariano Desanat

@Proton: परिणाम पैनल के क्षेत्र में अपने माउस को परिणाम पैनल पर ले जाएँ, इससे पहले कि पेज पूरी तरह से लोड हो गया हो और इससे आगे न बढ़ें। पृष्ठ को लोड करने के बाद तुरंत माउस की स्थिति का पता चल जाता है। कोई माउस आंदोलन की जरूरत है। इसलिए माउसएंटर भी निकाल दिया जाता है, जब पेज लोड हो जाता है और माउस डॉक्यूमेंट एरिया के अंदर होता है। यही है, ओपी मूल रूप से क्या चाहता था। कोई अन्य इस उत्तर को प्रदान नहीं करता है।

— सुपरनोवा

एक संभावित रूप से उपयोगी इसके अतिरिक्त के लिए एक समारोह को जोड़ने के लिए है mouseleaveघटना है कि सेट xऔर yवापस करने के लिए nullया'undefined'

— rtpax

chrome 68, ऊपर jsfiddel का उपयोग करते हुए, अलर्ट पहले माउस की चाल पर होता है और लोड पर नहीं, भले ही पेज लोड होने से पहले माउस को रेंडर किए गए क्षेत्र में ले जाया जाए।

— १६'१var को १६:१६

Answer 3

आप क्या कर सकते हैं xऔर yअपने कर्सर के निर्देशांक के लिए वैरिएबल बना सकते हैं , जब भी माउस मूव करता है तो उन्हें अपडेट करें और संग्रहीत स्थिति के साथ आपकी आवश्यकता के लिए एक अंतराल पर एक फ़ंक्शन को कॉल करें।

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

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

पूर्ववर्ती कोड आपके कर्सर के संदेश के साथ एक सेकंड में एक बार अपडेट होता है। आशा है कि ये आपकी मदद करेगा।

Comments

क्या आपने इस पोस्ट का विषय पढ़ा? ओपी पूछते हैं कि किसी घटना का उपयोग किए बिना माउस को कैसे समन्वयित किया जाए। फिर भी आपकी पोस्ट onmousemove इवेंट का उपयोग करने का सुझाव देती है।

— जेक

@ जेक हालांकि ओपी ने विशेष रूप से एक गैर-घटना पद्धति के लिए कहा था, इस उत्तर से उन लोगों को लाभ होता है जो यहां एक उत्तर की तलाश में थे और संभवतः एक वैकल्पिक हल। इसके अलावा, मैं इस उत्तर को आंशिक रूप से विषय के भीतर मानता हूँ जहाँ तक मुझे पता है, यह किसी भी समय कर्सर की स्थिति प्राप्त करने का सबसे अच्छा तरीका है सीधे घटनाओं का उपयोग किए बिना। उस ने कहा, इस उत्तर को तथ्य बताते हुए और टिप्पणियों में नाइटपैकिंग से बचने के लिए एक तरह की पेशकश के साथ अधिक शब्दों के साथ कहा जा सकता था।

— jpeltoniemi

@Pichan इससे मुझे कोई फ़ायदा नहीं हुआ, क्योंकि मैं cursorX/Yकिसी भी घटना के होने से पहले उन वेरिएबल को भरने का रास्ता खोज रहा हूँ ।

— polkovnikov.ph

बहुत कम उपयोगकर्ता अभ्यस्त फायर माउस ईवेंट

— SuperUberDuper

सावधान, एक चूहे श्रोता के आसपास रखना महंगा हो सकता है। मैं सुझाव दूंगा कि आप निर्देशांक प्राप्त करने के बाद श्रोता को अंतराल में फिर से तैयार करें और श्रोता को नष्ट करें।

— केआरबी

Answer 4

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

उदाहरण के लिए - पहले तत्व स्क्रीन के दाएं और बाएं आधे भाग लेते हैं, बाद में ऊपरी और निचले आधे। अब तक हम पहले से ही जानते हैं कि माउस किस तिमाही में स्क्रीन पर स्थित है, दोहराने में सक्षम है - इस अंतरिक्ष के किस तिमाही में ...

Answer 5

अगर आप 2,000 x 2,000 <a>तत्वों को प्रस्तुत करते हैं तो @Tim डाउन का उत्तर निष्पादित नहीं होता है :

ठीक है, मैंने अभी एक तरीका सोचा है। अपने पृष्ठ को एक div के साथ ओवरले करें जो पूरे दस्तावेज़ को कवर करता है। उसके अंदर, 2,000 x 2,000 तत्व बनाएं (कहें) (ताकि: hover छद्म वर्ग IE 6 में काम करेगा, देखें), आकार में प्रत्येक 1 पिक्सेल। एक सीएसएस बनाएं: उन तत्वों के लिए होवर नियम जो एक संपत्ति को बदलते हैं (चलो फ़ॉन्ट-परिवार कहते हैं)। अपने लोड हैंडलर में, 4 मिलियन तत्वों में से प्रत्येक के माध्यम से साइकिल चलाएं, जब तक आप होवर फ़ॉन्ट के साथ नहीं मिलते हैं, तब तक करंटस्टाइल / getComputedStyle () की जांच करें। दस्तावेज़ के भीतर समन्वय प्राप्त करने के लिए इस तत्व से वापस बाहर निकालें।

एनबी ने ऐसा नहीं किया।

लेकिन आपको 4 मिलियन तत्वों को एक बार में प्रस्तुत करने की आवश्यकता नहीं है, इसके बजाय बाइनरी खोज का उपयोग करें। <a>इसके बजाय केवल 4 तत्वों का उपयोग करें:

• चरण 1: पूरे स्क्रीन को शुरुआती खोज क्षेत्र मानें
• चरण 2: खोज क्षेत्र को 2 x 2 = 4 आयत <a>तत्वों में विभाजित करें
• चरण 3: getComputedStyle()फ़ंक्शन का उपयोग करके यह निर्धारित करना कि कौन सा आयत माउस घूमता है
• चरण 4: खोज क्षेत्र को उस आयत में कम करें और चरण 2 से दोहराएं।

इस तरह आपको इन चरणों को अधिकतम 11 बार दोहराने की आवश्यकता होगी, आपकी स्क्रीन पर विचार 2048px से अधिक व्यापक नहीं है।

तो आप अधिकतम 11 x 4 = 44 <a>तत्व उत्पन्न करेंगे ।

यदि आपको एक पिक्सेल के लिए माउस की स्थिति निर्धारित करने की आवश्यकता नहीं है, लेकिन कहते हैं कि 10px सटीकता ठीक है। आप अधिकतम 8 बार चरणों को दोहराएंगे, इसलिए आपको अधिकतम 8 x 4 = 32 <a>तत्वों को आकर्षित करना होगा ।

साथ ही <a>तत्वों को उत्पन्न करना और तबाह करना परफॉर्म नहीं है क्योंकि DOM आमतौर पर धीमा है। बजाय, आप बस प्रारंभिक 4 पुन: उपयोग कर सकते हैं <a>तत्वों और सिर्फ अपने को समायोजित top, left, widthऔर heightचरणों के माध्यम से आप के रूप में पाश।

अब, 4 <a>का निर्माण एक ओवरकिल भी है। इसके बजाय, आप प्रत्येक आयत में <a>परीक्षण के लिए एक ही तत्व का पुन: उपयोग कर सकते हैं getComputedStyle()। तो, बंटवारे के बजाय 2 एक्स 2 में खोज क्षेत्र <a>तत्वों बस एक ही पुन: उपयोग <a>तत्व के साथ ले जाकर topऔर leftशैली गुण।

तो, आप सभी की जरूरत है एक एकल <a>तत्व को बदलने के लिए widthऔर heightअधिकतम 11 बार है, और उसके topऔर leftअधिकतम 44 बार बदलने के लिए और आप सटीक माउस स्थिति होगी।

Answer 6

सबसे सरल समाधान लेकिन 100% सटीक नहीं

$(':hover').last().offset()

परिणाम: {top: 148, left: 62.5}
परिणाम निकटतम तत्व आकार पर निर्भर करता है और undefinedउपयोगकर्ता द्वारा टैब स्विच किए जाने पर वापस लौटता है

Comments

मेरे लिए, यह undefinedपरवाह किए बिना लौटता है । क्या आप इसका उपयोग करने के तरीके के बारे में विस्तार से बता सकते हैं?

— tresf

यह तब लौटेगा undefinedजब कर्सर किसी भी तत्व (या जब ब्राउज़र ने फ़ोकस को खो दिया हो) नहीं था। यदि आप कंसोल से परीक्षण कर रहे हैं, तो आपको समय अंतराल सेट करने की आवश्यकता हो सकती है ..

— StefansArya

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

— tresf

मुझे सटीक माउस पोजीशन नहीं चाहिए, लेकिन मैं सिर्फ यह जानना चाहता हूं कि ईवेंट इवेंट के बिना माउस सही या एक्सट्रीम लेफ्ट है इसलिए आपका सॉल्यूशन मेरे मामले में काम करता है। आपको धन्यवाद

— Swap-IOS-Android

Answer 7

मैं कल्पना करता हूं कि शायद आपके पास टाइमर के साथ एक मूल पृष्ठ है और एक निश्चित समय या कार्य पूरा होने के बाद, आप उपयोगकर्ता को एक नए पृष्ठ पर भेजते हैं। अब आप कर्सर की स्थिति चाहते हैं, और क्योंकि वे प्रतीक्षा कर रहे हैं, वे जरूरी नहीं कि माउस को छू रहे हैं। इसलिए मानक घटनाओं का उपयोग करके मूल पृष्ठ पर माउस को ट्रैक करें और नए पृष्ठ के अंतिम मूल्य को प्राप्त करें या पोस्ट वेरिएबल में पास करें।

आप JHiring के कोड का उपयोग अपने मूल पृष्ठ पर कर सकते हैं ताकि नवीनतम स्थिति हमेशा एक वैश्विक चर में उपलब्ध हो:

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

यह उन उपयोगकर्ताओं की मदद नहीं करेगा जो आपके मूल पृष्ठ के अलावा अन्य माध्यमों से इस पृष्ठ पर जाते हैं।

Answer 8

मैंने एक क्षैतिज / ऊर्ध्वाधर खोज कार्यान्वित की, (पहले क्षैतिज रूप से व्यवस्थित खड़ी रेखा लिंक से भरा एक div बनाते हैं, फिर क्षैतिज रूप से व्यवस्थित किए गए क्षैतिज रेखा लिंक से भरा एक div बनाते हैं, और बस देखते हैं कि किसके पास होवर स्टेट है) जैसे टिम डाउन का विचार ऊपर है, और यह बहुत तेजी से काम करता है। अफसोस की बात है, KDE पर Chrome 32 पर काम नहीं करता है।

jsfiddle.net/5XzeE/4/

Comments

स्पष्ट रूप से ये ट्रिक तब तक काम नहीं करती हैं जब तक कि उपयोगकर्ता द्वारा एक स्पष्ट माउस चाल न हो। :(

— trusktr

Answer 9

कर्सर के स्थान को प्राप्त करने के लिए आपको माउस को स्थानांतरित करने की आवश्यकता नहीं है । स्थान भी चूहे के अलावा अन्य घटनाओं पर बताया गया है । यहाँ एक उदाहरण के रूप में एक क्लिक-इवेंट है :

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

Answer 10

@ सुपरनोवा के उत्तर पर भरोसा करते हुए , यहां ES6 कक्षाओं का उपयोग करने का एक तरीका thisहै जो आपके कॉलबैक में संदर्भ को सही रखता है :

class Mouse {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.callbacks = {
      mouseenter: [],
      mousemove: [],
    };
  }

  get xPos() {
    return this.x;
  }

  get yPos() {
    return this.y;
  }

  get position() {
    return `${this.x},${this.y}`;
  }

  addListener(type, callback) {
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct
    this.callbacks[type].push(callback);
  }

  // `handleEvent` is part of the browser's `EventListener` API.
  // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
  handleEvent(event) {
    const isMousemove = event.type === 'mousemove';
    const isMouseenter = event.type === 'mouseenter';

    if (isMousemove || isMouseenter) {
      this.x = event.pageX;
      this.y = event.pageY;
    }

    this.callbacks[event.type].forEach((callback) => {
      callback();
    });
  }
}

const mouse = new Mouse();

mouse.addListener('mouseenter', () => console.log('mouseenter', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove A', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove B', mouse.position));

Answer 11

यहाँ मेरा समाधान है। यह Window.currentMouseX और window.currentMouseY प्रॉपर्टीज को आप कहीं भी उपयोग कर सकते हैं। यह शुरू में और बाद में सही मूल्यों को सेट करने के लिए माउस आंदोलनों को सुनता है एक hovered तत्व (यदि कोई हो) की स्थिति का उपयोग करता है।

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll(':hover');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element's position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    document.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    });
}())

रचना सीएमएस स्रोत: https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162cc9c35a97618a96748639ff41251R1202

Answer 12

var x = 0;
var y = 0;

document.addEventListener('mousemove', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}

Comments

क्या अब भी उपयोगकर्ता को माउस को स्थानांतरित करने की आवश्यकता नहीं है?

— पॉल हैमस्ट्रा 14

Answer 13

मुझे लगता है कि मेरे पास काउंटिंग डिव और पिक्सल..लोल के साथ एक उचित समाधान हो सकता है

बस एनीमेशन फ्रेम या एक समारोह के समय अंतराल का उपयोग करें। आपको अभी भी केवल आरंभ करने के लिए एक बार एक माउस ईवेंट की आवश्यकता होगी, लेकिन तकनीकी रूप से आप इसे कभी भी पसंद करते हैं।

अनिवार्य रूप से हम माउस आंदोलन के साथ हर समय एक डमी div पर नज़र रख रहे हैं।

// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

नीचे तर्क है ..

var x,y;


$('body').mousemove(function( e ) {

    var x = e.clientX - (window.innerWidth / 2);
    var y = e.clientY - (window.innerHeight / 2);
 }


function looping (){

   /* track my div position 60 x 60 seconds!
      with out the mouse after initiation you can still track the dummy div.x & y
      mouse doesn't need to move.*/

   $('#mydiv').x = x;    // css transform x and y to follow 
   $('#mydiv)'.y = y;

   console.log(#mydiv.x etc)

   requestAnimationFrame( looping , frame speed here);
}