event.pageX প্রপার্টি
event.pageX প্রপার্টিতে
X-অক্ষ বরাবর মাউস কার্সারের স্থানাঙ্ক রয়েছে।
স্থানাঙ্ক নির্ধারণের জন্য আরও রয়েছে
event.clientX,
event.clientY,
event.pageY প্রপার্টি।
clientX/clientY
এবং pageX/pageY-এর মধ্যে পার্থক্য দেখা যাক।
clientX এবং clientY কিভাবে কাজ করে:
যদি আপনার 1000 বাই 1000 পিক্সেলের একটি উইন্ডো থাকে,
এবং মাউসটি ঠিক মাঝখানে থাকে, তাহলে clientX
এবং clientY উভয়ই 500 হবে। যদি
আপনি কার্সার না সরিয়ে অনুভূমিক বা উল্লম্বভাবে
পৃষ্ঠাটি স্ক্রল করেন, তাহলে clientX এবং clientY-এর মান
পরিবর্তন হবে না, কারণ সেগুলো ডকুমেন্টের পরিবর্তে উইন্ডোর
সাপেক্ষে গণনা করা হয়।
pageX এবং pageY কিভাবে কাজ করে:
যদি আপনার 1000 বাই 1000 পিক্সেলের একটি উইন্ডো থাকে,
এবং কার্সারটি ঠিক মাঝখানে থাকে, তাহলে
pageX এবং pageY উভয়ই 500 হবে। যদি
আপনি 250 পিক্সেল নিচে স্ক্রল করেন, তাহলে pageY-এর মান হবে 750।
এইভাবে pageX এবং pageY-এ স্ক্রলিং বিবেচনা করে ইভেন্টের
স্থানাঙ্ক থাকে।
সিনট্যাক্স
event.pageX;
উদাহরণ
পৃষ্ঠায় মাউস চলাচলের সময় ব্রাউজার উইন্ডোর
সাপেক্ষে এর স্থানাঙ্ক (pageX এবং pageY)
আউটপুট করা হবে:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
