কীভাবে ঘটনা ছাড়াই মাউস পজিশন পাবেন (মাউস না সরানো)?

Question

কোনও মাউস চলাচল ইভেন্ট ছাড়াই পৃষ্ঠা লোড হওয়ার পরে (মাউস না সরানো) জাভাস্ক্রিপ্টের সাহায্যে মাউসের অবস্থান পাওয়া সম্ভব?

Comments

মাউসমোভ ইভেন্টটিতে কোনও ভুল নেই। কিছু ক্ষেত্রে ব্যবহারকারীরা মাউসটি সরান না। আপনার উত্তরের জন্য ধন্যবাদ.

— নরবার্ট তমাস

নরবার্ট তমাস, @ সুপারনোভার উত্তর (যা এই বছর পর্যন্ত যোগ করা হয়নি) দেখায় যে মাউসেন্টার এটির জন্য ভাল কাজ করে কারণ এটি পৃষ্ঠা লোডে আগুন লাগিয়ে দেয় (যদি মাউস ভিউপোর্টে থাকে)। 2010 সালে এটি সেভাবে কাজ করেনি, বা এটি কেবল কেউ চেষ্টা করার কথা ভাবেনি?

— পিটার হ্যানসেন

@ ক্রিসেন্টফ্রেশ কিছু ক্ষেত্রে (ব্যবহারকারী স্ক্রিপ্টগুলির মতো) আপনি অনেক mousemoveইভেন্ট যুক্ত করে ব্রাউজারটি ধীর করতে চান না ।

— টোমা জ্যাটো - মনিকা

মাউসওভার দিয়ে এফএফ এ সম্ভব, তবে আইই এবং ক্রোমে নেই।

— এলাদ

অথবা, কোনও গেমটিতে আপনার ক্যামেরাটি গেমের বিশ্বজুড়ে চলেছে এবং চরিত্রটি মাউসটির দিকে তাকিয়ে আছে (সাধারণ উপরে-ডাউন শ্যুটার শৈলী) তবে যদি ব্যবহারকারী কোনও মাউস না সরায় তবে এটি ভুল পয়েন্টটিকে কেন্দ্র করে যদি আপনি ঘুরে দেখেন তবে আপনি কেবল মাউসমেভের উপর নির্ভর করেন। যাইহোক, এটি কোনও বড় বিষয় নয়, আমরা কেবলমাত্র পয়েন্টারের "ওয়ার্ল্ড" সমন্বয়গুলি সঞ্চয় করি এবং লোকেরা এটি জিজ্ঞাসা করি।

— কামরানিকাস

Answer 1

আসল উত্তর: না, এটা সম্ভব নয়।

ঠিক আছে, আমি একটি উপায় চিন্তা করেছি। আপনার পৃষ্ঠাটি একটি ডিবের সাথে ওভারলে দিন যা পুরো ডকুমেন্টকে coversেকে দেয় এর অভ্যন্তরে, 2 হাজার x 2 টি <a>উপাদান তৈরি করুন (বলুন) যাতে :hoverসিউডো-ক্লাস IE 6 এ কাজ করবে, দেখুন), প্রতিটি 1 পিক্সেল আকারের। সম্পত্তি পরিবর্তন করে :hoverএমন <a>উপাদানগুলির জন্য একটি সিএসএস বিধি তৈরি করুন (আসুন আমরা বলি font-family)। আপনার লোড হ্যান্ডলারটিতে, 4 মিলিয়ন <a>উপাদানগুলির প্রত্যেকের মধ্যে চক্র করুন , পরীক্ষা করুন currentStyle/ getComputedStyle()যতক্ষণ না আপনি হোভার ফন্টের সাথে একটি খুঁজে পান। ডকুমেন্টের মধ্যে সমন্বয় পেতে এই উপাদান থেকে ফিরে এক্সট্রোপোলেট করুন।

এনবি এটি করবেন না ।

Comments

হা হা - কিছু সময় আপনার চারপাশে গুগল করা উচিত এবং দেখেন যে কতজন লোক এটি বাস্তবায়িত করেছে

— পয়েন্টি

আসলে, এটি খুব বেশি সিপিইউ লোড না করেই কার্যকর করা যায় (আমার মনে হয় I আমি এটি পরীক্ষা করে দেখছি না)। ডোম রেডে জাভাস্ক্রিপ্টের সাহায্যে <a> উপাদান তৈরি করুন, মাউস পোস্ট গ্রহণ করুন এবং তারপরে সমস্ত <a> উপাদানগুলি সরিয়ে ফেলুন। মাউসমাউসে আপনার মাউস অবস্থান নিতে অন্য ফাংশন থাকা উচিত। যাইহোক, এটি হাসিখুশি ছিল।

— মেশিনাডিক্ট

বাইনারি অনুসন্ধানের মাধ্যমে সম্ভবত এটি ব্যবহারিক করা যেতে পারে? <a>প্রদত্ত আয়তক্ষেত্রগুলিকে আচ্ছাদন করার জন্য লুপ তৈরি করে (আকারের <img>উপাদানগুলির নিখুঁত অবস্থান ব্যবহার করে, আমি মনে করি), প্রতিটি সময় আয়তক্ষেত্র সঙ্কুচিত করে। হ্যাঁ, এটি হাস্যকর, তবে প্রথম মাউসমেভের আগে এই তথ্যটি অর্জন করতে সক্ষম হচ্ছে না।

— দারিয়াস বেকন

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 সেট করতে পারেন। সুতরাং ব্যবহারকারী এটির কার্সর সহ আপনার পৃষ্ঠায় রয়েছে কিনা তা আপনি পরীক্ষা করতে পারেন।

Comments

এটি এখানে একমাত্র সত্যিকারের দরকারী উত্তর বলে মনে হবে, যা বিজোড় বলে মনে হচ্ছে। প্রকৃতপক্ষে (সর্বশেষ ফায়ারফক্স, ক্রোম এবং আইই ১১ এ) মাউসেন্টারটি পৃষ্ঠা লোডে আগুন জ্বলিয়ে দেয় এবং সঠিক স্থানাঙ্ক সরবরাহ করে। গত কয়েক বছরে এই অঞ্চলে ব্রাউজারের আচরণ কি কেবল পরিবর্তিত হয়েছে?

— পিটার হানসেন

আসলে "মাউসেন্টার" এর কোনও মান যুক্ত হবে বলে মনে হয় না। আমি ক্রোম এবং আইআই-তে নিম্নলিখিত jsfiddle দিয়ে পরীক্ষা করেছি এবং আপনি মাউসটিকে অভ্যন্তরীণ নথিতে (ফলাফল প্যানেল) না লাগানো

— মারিয়ানো দেশানজে

@ প্রোটন: আপনার মাউসটিকে ফলাফল প্যানেলে সরান ফলাফলের প্যানেল এলাকায় পুরো পৃষ্ঠাটি লোড হওয়ার আগে এবং পুরোপুরি সরাতে হবে না। অনলোডের পরে পৃষ্ঠাটি তাত্ক্ষণিকভাবে মাউসের অবস্থান জানতে পারে। কোনও মাউস চলাচলের প্রয়োজন নেই। পৃষ্ঠাটি লোড হয়ে গেলে এবং মাউস নথির ক্ষেত্রের অভ্যন্তরে থাকা অবস্থায় মাউসেন্টারটিও বহিস্কার হয়। অর্থাৎ ওপি মূলত যা চেয়েছিল। অন্য কেউ এই উত্তর দেয় না।

— সুপারনাভা

একটি সম্ভাব্য দরকারী উপরন্তু জন্য একটি ফাংশন যোগ হয় mouseleaveঘটনা যে সেট xএবং yফিরে nullবা'undefined'

— rtpax

ক্রোম 68 68, উপরের jsfiddel ব্যবহার করে সতর্কতাটি প্রথম মাউস পদক্ষেপে ঘটে এবং লোড না করে, পৃষ্ঠাটি লোড শেষ হওয়ার আগেই মাউস রেন্ডার অঞ্চলে স্থানান্তরিত হয়।

— জুনভর

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

আপনি কি এই পোস্টের বিষয় পড়েন? ওপি জিজ্ঞাসা করে যে কোনও ইভেন্ট না ব্যবহার করে মাউস সমন্বয় কীভাবে করা যায়। তবুও আপনার পোস্টটি অন-মাউস ইভেন্টটি ব্যবহার করার পরামর্শ দেয়।

— জেক

@ জেক যদিও ওপি বিশেষত একটি অ ইভেন্ট ইভেন্টের জন্য জিজ্ঞাসা করেছে, এই উত্তরটি অন্যদের যারা এখানে উত্তরটি পেয়েছিল এবং সম্ভবত একটি কর্মসংস্থান খুঁজছে তাদের উপকার করে। এছাড়াও, আমি যতদূর জানি আমি বিষয়টির মধ্যে এই উত্তরটিকে আংশিকভাবে বিবেচনা করব, সরাসরি ইভেন্টগুলি ব্যবহার না করে যে কোনও সময়ে কার্সারের অবস্থান পাওয়ার জন্য এটি সেরা পদ্ধতি। এটি বলেছিল, উত্তরটি সত্যটি উল্লেখ করে এবং মন্তব্যে নীটপিকিং এড়ানোর জন্য একটি উপায়ের প্রস্তাব দেওয়ার মতো আরও শব্দ করা যেতে পারে।

— jpeltoniemi

@ পিচান এটি আমার উপকারে আসেনি, কারণ যে cursorX/Yকোনও ঘটনা ঘটে যাওয়ার আগে আমি সেই পরিবর্তনগুলি পূরণ করার জন্য একটি উপায় খুঁজছিলাম ।

— polkovnikov.ph

খুব কম ব্যবহারকারীর মাউস ইভেন্টগুলিতে আগুন

— লাগবে না

সাবধান, মাউসমাভ শ্রোতাদের চারপাশে রাখা ব্যয়বহুল হতে পারে। আমি বিরতিতে শ্রোতাদের পুনরায় তৈরি করার এবং আপনার সমন্বয়গুলি পাওয়ার পরে শ্রোতাকে নষ্ট করার পরামর্শ দেব।

— কেআরবি

Answer 4

টিম ডাউন যে পরামর্শ দিয়েছিল তার অনুরূপ কিছু চেষ্টা করতে পারেন - তবে স্ক্রিনে প্রতিটি পিক্সেলের জন্য উপাদান না রেখে কেবল ২-৪ টি উপাদান (বাক্স) তৈরি করুন এবং স্ক্রিনের এখনও সম্ভাব্য অবস্থানগুলিকে বিভক্ত করার জন্য তাদের অবস্থান, প্রস্থ, উচ্চতা পরিবর্তনশীল করুন 2-4 দ্বারা পুনরাবৃত্তভাবে, এভাবে মাউসটির আসল অবস্থানটি দ্রুত খুঁজে পাওয়া যায়।

উদাহরণস্বরূপ - প্রথম উপাদানগুলি ডান এবং বাম অর্ধেক পর্দা নেয়, তারপরে উপরের এবং নীচের অর্ধেকটি। এতক্ষণে আমরা ইতিমধ্যে জানি যে স্ক্রিনের কোন চতুর্থাংশে মাউসটি অবস্থিত, পুনরাবৃত্তি করতে সক্ষম - এই স্থানের কোন চতুর্থাংশ ...

Answer 5

@ টিম ডাউনের উত্তরটি পারফরম্যান্ট নয় যদি আপনি 2,000 x 2,000 <a>উপাদান রেন্ডার করেন :

ঠিক আছে, আমি কেবল একটি উপায় চিন্তা করেছি। আপনার পৃষ্ঠাটি একটি ডিবের সাথে ওভারলে করুন যা পুরো ডকুমেন্টটি কভার করে। এর অভ্যন্তরে, 2,000 x 2,000 উপাদান তৈরি করুন (বলুন) (যাতে: হোভার সিউডো-ক্লাস IE 6 এ কাজ করবে, দেখুন), প্রতিটি 1 পিক্সেল আকারের। একটি CSS তৈরি করুন: সেই উপাদানগুলির জন্য হোভার রুল করুন যা কোনও সম্পত্তি পরিবর্তন করে (আসুন ফন্ট-পরিবার বলি)। আপনার লোড হ্যান্ডলারটিতে, হোভার ফন্টের সাথে একটি না পাওয়া পর্যন্ত বর্তমান স্টাইল / গেটকম্পিউড স্টাইল () পরীক্ষা করে 4 মিলিয়ন উপাদানগুলির প্রত্যেকের মধ্যে চক্র করুন। ডকুমেন্টের মধ্যে সমন্বয় পেতে এই উপাদান থেকে ফিরে এক্সট্রোপোলেট করুন।

এনবি এটি করবেন না।

তবে আপনাকে একবারে 4 মিলিয়ন উপাদান রেন্ডার করতে হবে না, পরিবর্তে বাইনারি অনুসন্ধান ব্যবহার করুন। <a>পরিবর্তে 4 টি উপাদান ব্যবহার করুন:

• পদক্ষেপ 1: পুরো পর্দাটিকে শুরু করার অনুসন্ধান অঞ্চল হিসাবে বিবেচনা করুন
• পদক্ষেপ 2: অনুসন্ধান অঞ্চলটি 2 x 2 = 4 আয়তক্ষেত্রের <a>উপাদানগুলিতে ভাগ করুন
• পদক্ষেপ 3: getComputedStyle()কোন আয়তক্ষেত্রের মাউস ঘোরাচ্ছে তা নির্ধারণ করে ফাংশনটি ব্যবহার করে
• পদক্ষেপ 4: অনুসন্ধান আয়তাকে সেই আয়তক্ষেত্রটি হ্রাস করুন এবং দ্বিতীয় ধাপ থেকে পুনরাবৃত্তি করুন।

আপনার পর্দা 2048px এর চেয়ে বেশি প্রশস্ত নয় বিবেচনা করে আপনাকে এই পদক্ষেপগুলি সর্বোচ্চ 11 বার পুনরাবৃত্তি করতে হবে।

সুতরাং আপনি সর্বাধিক 11 x 4 = 44 টি <a>উপাদান তৈরি করবেন।

আপনার যদি পিক্সেলের ঠিক মাউস অবস্থান নির্ধারণ করতে না হয় তবে 10px যথার্থতা ঠিক আছে বলে দিন। আপনি পদক্ষেপগুলি সর্বাধিক 8 বার পুনরাবৃত্তি করতে পারেন, তাই আপনাকে সর্বোচ্চ 8 x 4 = 32 <a>উপাদান আঁকতে হবে ।

এছাড়াও <a>ডিওএম সাধারণত ধীর গতির কারণে উপাদানগুলি তৈরি এবং তারপরে ধ্বংসগুলি সম্পাদন করা হয় না। পরিবর্তে, আপনি শুধু প্রাথমিক 4 পুনরায় ব্যবহার করতে পারেন <a>উপাদান এবং শুধু তাদের সমন্বয় top, left, widthএবং heightপদক্ষেপের মধ্য দিয়ে যেমন লুপ।

এখন, 4 তৈরি <a>করাও ওভারকিল is পরিবর্তে, প্রতিটি আয়তক্ষেত্রের <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যখন ফিরে আসবে যখন কার্সারটি কোনও উপাদানকে ঘুরিয়ে দিচ্ছে না (বা ব্রাউজারটি ফোকাস হারিয়েছে)। আপনি যদি কনসোল থেকে পরীক্ষা

— নিচ্ছেন

ধন্যবাদ। setTimeoutকাজ করছে. আমি জিসফিল ব্যবহার করছিলাম এবং আপনি ঠিক বলেছেন, এটি কখনই হোভার ইভেন্টে আঘাত করে না কারণ প্রতিবার আপনি খেললে এটি ডমকে পুনরায় আঁকায়। আমি অন্যদের জন্য এই ইঙ্গিতটি যুক্ত করার পরামর্শ দেব।

— tresf

আমি সঠিক মাউস পজিশনটি চাই না তবে আমি কেবল জানতে চাই যে মাউসটি চূড়ান্ত ডান বা চরম বাম কোনও ইভেন্ট অবজেক্ট ছাড়াই ফাংশনে চলেছে যাতে আপনার সমাধানটি আমার ক্ষেত্রে কাজ করে..তাই ধন্যবাদ

— অদলবদল-আইওএস-অ্যান্ড্রয়েড

Answer 7

আমি ভাবছি যে আপনার একটি টাইমার সহ একটি প্যারেন্ট পৃষ্ঠা রয়েছে এবং নির্দিষ্ট সময় বা কোনও কাজ শেষ হওয়ার পরে আপনি ব্যবহারকারীকে একটি নতুন পৃষ্ঠায় ফরোয়ার্ড করেছেন। এখন আপনি কার্সার অবস্থানটি চান, এবং যেহেতু তারা অপেক্ষা করছে, তারা অগত্যা মাউস স্পর্শ করছে না। সুতরাং স্ট্যান্ডার্ড ইভেন্টগুলি ব্যবহার করে প্যারেন্ট পৃষ্ঠায় মাউসকে ট্র্যাক করুন এবং একটি গিটে বা পোস্টের ভেরিয়েবলের নতুন পৃষ্ঠায় শেষ মানটি দিন।

আপনি জেহর্ডিংয়ের কোডগুলি আপনার প্যারেন্ট পৃষ্ঠায় ব্যবহার করতে পারেন যাতে সর্বশেষতম অবস্থানটি সর্বদা বিশ্বব্যাপী চলকটিতে উপলভ্য থাকে:

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

এটি আপনার অভিভাবক পৃষ্ঠা ব্যতীত অন্য কোনও উপায়ে এই পৃষ্ঠায় নেভিগেট করা ব্যবহারকারীদের সহায়তা করবে না।

Answer 8

আমি একটি অনুভূমিক / উল্লম্ব অনুসন্ধান প্রয়োগ করেছি, (প্রথমে অনুভূমিকভাবে সাজানো উল্লম্ব লাইন লিঙ্কগুলিতে একটি ডিভি পূর্ণ করুন, তারপরে উল্লম্বভাবে সাজানো অনুভূমিক রেখার লিঙ্কগুলিতে একটি ডিভি পূর্ণ করুন, এবং কেবল টিউম ডাউনের মত মত টিউম ডাউনের মত দেখতে পাবেন) এটি বেশ দ্রুত কাজ করে। দুঃখজনকভাবে, কেডিএতে ক্রোম 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

অন দ্য রিফিং @ SuperNova এর উত্তর , এখানে 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

এখানে আমার সমাধান। এটি উইন্ডো। কর্নারমাউসএক্স এবং উইন্ডো ক্রন্টমাউসওয়্যার বৈশিষ্ট্যগুলি আপনি যে কোনও জায়গায় ব্যবহার করতে পারবেন রফতানি করে । এটি প্রাথমিকভাবে একটি আটকানো উপাদানটির অবস্থান (যদি থাকে তবে) ব্যবহার করে এবং তারপরে সঠিক মানগুলি সেট করতে মাউস গতিবিধি শোনায়।

(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-b162dc9c35a97618a96748639ff41251R1202

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

এটির জন্য কি এখনও মাউসটি সরানোর প্রয়োজন নেই?

— পল হিমস্ট্র্রা

Answer 13

আমি মনে করি ডিভ এবং পিক্সেল গণনা সহ আমার একটি যুক্তিসঙ্গত সমাধান থাকতে পারে..লল

কেবল অ্যানিমেশন ফ্রেম বা কোনও ফাংশনের একটি সময়ের ব্যবধান ব্যবহার করুন। আপনার কেবলমাত্র একবার শুরু করার জন্য মাউস ইভেন্টের প্রয়োজন হবে তবে প্রযুক্তিগতভাবে আপনি যেখানে চান সেখানে এটি অবস্থান করুন।

মূলত আমরা মাউস চলাচল করে সর্বদা একটি ডামি ডিভাইস ট্র্যাক করছি।

// 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);
}