আমি এমন একটি ফাংশন চাই যা আমাকে জানায় যে কোন উপাদানটির মাউস কার্সার শেষ হয়েছে।
সুতরাং, উদাহরণস্বরূপ, যদি ব্যবহারকারীর মাউস এই টেক্সারিয়া (আইডি সহ wmd-input) এর উপরে চলে যায়, কল window.which_element_is_the_mouse_on()করা কার্যত সমান হবে$("#wmd-input")
উত্তর:
একটি দুর্দান্ত শীতল ফাংশন বলা হয় document.elementFromPointযা এটির মতো শোনাচ্ছে does
আমাদের যা প্রয়োজন তা হ'ল মাউসের এক্স এবং ওয়াই কোর্ড খুঁজে বের করা এবং তারপরে সেই মানগুলি ব্যবহার করে এটি কল করা:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetবা যা কিছু হোক
event.target?
eventএবং কীভাবে এটি এসেছিল তা ব্যাখ্যা করে না
নতুন ব্রাউজারগুলিতে আপনি নিম্নলিখিতগুলি করতে পারেন:
document.querySelectorAll( ":hover" );এটি আপনাকে আইটেমগুলির একটি নোডলিস্ট দেবে যা বর্তমানে ডকুমেন্ট ক্রমে মাউসটি শেষ। নোডলিস্টে সর্বশেষ উপাদানটি সুনির্দিষ্ট, প্রতিটি পূর্ববর্তী পিতামাতা, দাদা-পিতা এবং আরও কিছু হওয়া উচিত।
<li>অন্যান্য <li>উপাদানগুলির উপরে যখন আমি কিছুক্ষণ টানছিলাম তখন এটি কাজ করবে বলে মনে হচ্ছে না ।
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemoveপারফরম্যান্সের ক্ষতি করতে পারে
যদিও নিম্নলিখিতগুলি প্রকৃতপক্ষে প্রশ্নের উত্তর দিচ্ছে না, যেহেতু এটি গুগলিংয়ের প্রথম ফলাফল (গুগলার একই প্রশ্নটি না জিজ্ঞাসা করতে পারে :), আশা করি এটি কিছু অতিরিক্ত ইনপুট সরবরাহ করবে।
মাউসটি বর্তমানে সমস্ত উপাদানগুলির তালিকা সংগ্রহের জন্য দুটি পৃথক পদ্ধতি রয়েছে (সম্ভবত নতুন ব্রাউজারগুলির জন্য):
Dherman এর উত্তর হিসাবে, কেউ কল করতে পারেন
var elements = document.querySelectorAll(':hover');যাইহোক, এটি ধরে নিয়েছে যে কেবলমাত্র শিশুরা তাদের পূর্বপুরুষদের উপর চাপ দেবে, যা সাধারণত ক্ষেত্রে হয় তবে সাধারণভাবে সত্য নয়, বিশেষত এসভিজির সাথে ডিল করার সময় যেখানে ডম গাছের বিভিন্ন শাখায় থাকা উপাদান একে অপরের সাথে ওভারল্যাপ করতে পারে।
এই পদ্ধতিটি document.elementFromPoint(x, y)শীর্ষস্থানীয় উপাদানটি সন্ধান করতে ব্যবহার করে অস্থায়ীভাবে এটিকে আড়াল করে রাখে (যেহেতু আমরা একই সাথে তা পুনরুদ্ধার করি, ব্রাউজারটি আসলে এটি সরবরাহ করে না), তারপরে দ্বিতীয় শীর্ষস্থানীয় উপাদানটি সন্ধান করুন ... কিছুটা হ্যাকি দেখায়, তবে এটি যখন আপনি প্রত্যাশা করেন তা প্রত্যাবর্তন করে যখন কোনও গাছে ভাইবোন উপাদান একে অপরকে সংযুক্ত করে রাখে। দয়া করে এটি এই পোস্টে অধিক বিবরণের জন্য,
function allElementsFromPoint(x, y) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.elementFromPoint(x, y);
if (!element || element === document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}উভয়ই চেষ্টা করে দেখুন এবং তাদের পৃথক আয় দেখুন check
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()ডোম ট্রিতে কেবল প্রথম উপাদান পায়। এটি বেশিরভাগ বিকাশকারীদের প্রয়োজনের জন্য পর্যাপ্ত নয়। উদাহরণস্বরূপ একাধিক উপাদান পাওয়ার জন্য বর্তমান মাউস পয়েন্টার অবস্থান এটি আপনার প্রয়োজনীয় ফাংশন:
document.elementsFromPoint(x, y) . // mind the 's' in elementsএটি প্রদত্ত পয়েন্টের অধীনে সমস্ত উপাদান উপাদানগুলির একটি অ্যারে প্রদান করে। এই ফাংশনটিতে মাউস এক্স এবং ওয়াই মানগুলি পাস করুন।
এখানে আরও তথ্য: https://developer.mozilla.org/en-US/docs/Web/API/docament/elementsFromPoint
সমর্থিত নয় এমন খুব পুরানো ব্রাউজারগুলির জন্য, আপনি ব্যবহার করতে পারেন এই উত্তরটি ফালব্যাক হিসাবে ।
মাউসওভার ইভেন্টগুলি বুদবুদ, যাতে আপনি একক শ্রোতা শরীরে রাখতে পারেন এবং বুদবুদ হয়ে ওঠার জন্য অপেক্ষা করতে পারেন, তারপরে event.targetবা ধরে নিন event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">document.elementFromPoint(x, y)।
নিম্নলিখিত কোডটি আপনাকে মাউস পয়েন্টারের উপাদান পেতে সহায়তা করবে। প্রতিক্রিয়াযুক্ত উপাদানগুলি কনসোলে প্রদর্শিত হবে।
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXএবং e.clientYপরিবর্তে (FIREFOX 59 উপর পরীক্ষা)।
আপনি mouseoverকিছু উপযুক্ত পূর্বপুরুষের উপর ইভেন্টের লক্ষ্য দেখতে পারেন :
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});<!-- One simple solution to your problem could be like this: -->
<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn't test it for Safari. -->ডেমো: ডি স্নিপেট উইন্ডোতে আপনার মাউসটি সরান: ডি
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>mousemoveযখন মাউসটি সরানো হয় তখন ডিওএম ইভেন্টের টার্গেটটি কার্সারের নীচে শীর্ষ সর্বাধিক ডোম উপাদান থাকে:
(function(){
//Don't fire multiple times in a row for the same element
var prevTarget=null;
document.addEventListener('mousemove', function(e) {
//This will be the top-most DOM element under cursor
var target=e.target;
if(target!==prevTarget){
console.log(target);
prevTarget=target;
}
});
})();এটি @ ফিলিপ ওয়ালটনের সমাধানের মতো, তবে jQuery বা একটি সেটআইন্টারওয়াল প্রয়োজন হয় না।
আপনি এই নির্বাচকটি অবজেক্ট অব আন্ডার হাউস করতে এবং তাকে jquery অবজেক্ট হিসাবে চালিত করার চেয়ে ব্যবহার করতে পারেন। $(':hover').last();
আমাকে এই পরামর্শ দিয়ে শুরু করতে দাও যে আমি যে পদ্ধতিটি প্রস্তাব করতে চলেছি তা ব্যবহার করার প্রস্তাব দিই না। এটা অনেক ভালো শুধুমাত্র উপাদান আপনি বুদ্ধিমান আগ্রহী হোক বা না হোক মাউস দিয়ে শেষ হয়েছে করছি করতে ব্যবহার ঘটনা চালিত উন্নয়ন এবং বাঁধুন ঘটনা না mouseover, mouseout, mouseenter, mouseleave, ইত্যাদি
যদি আপনার মাউসটি কোন উপাদানটি শেষ হয়েছে তা জানার দক্ষতা অবশ্যই অবলম্বন করা উচিত, আপনার একটি ফাংশন লিখতে হবে যা mouseoverইভেন্টটি ডোমের সমস্ত কিছুর সাথে আবদ্ধ করে , এবং তারপরে বর্তমান উপাদানটি কিছু পরিবর্তনশীল হিসাবে যা কিছু আছে তা সঞ্চয় করতে হবে।
আপনি যেমন কিছু করতে পারে:
window.which_element_is_the_mouse_on = (function() {
var currentElement;
$("body *").on('mouseover', function(e) {
if(e.target === e.currentTarget) {
currentElement = this;
}
});
return function() {
console.log(currentElement);
}
}());মূলত, আমি একটি তাত্ক্ষণিক ফাংশন তৈরি করেছি যা ইভেন্টটিকে সমস্ত উপাদানগুলিতে সেট করে এবং আপনার পদচিহ্ন হ্রাস করতে বন্ধের মধ্যে বর্তমান উপাদানটি সংরক্ষণ করে।
এখানে একটি কার্যকারী ডেমো যা window.which_element_is_the_mouse_onপ্রতি সেকেন্ডে কল করে এবং মাউসটি বর্তমানে কনসোলে কী উপাদানটি রয়েছে তা লগ করে।
পুরানো প্রশ্ন কিন্তু তাদের জন্য একটি সমাধান যা এখনও লড়াই করতে পারে। আপনি mouseoverসনাক্ত করতে চান শিশু উপাদান (গুলি) এর 'পিতামাতার' উপাদানটিতে একটি ইভেন্ট যুক্ত করতে চান। নীচের কোডটি আপনাকে কীভাবে এটি পরিচালনা করতে দেখায়।
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});