กำหนดองค์ประกอบที่ตัวชี้เมาส์อยู่ด้านบนใน JavaScript

Question 1

ฉันต้องการฟังก์ชันที่บอกฉันว่าเคอร์เซอร์ของเมาส์อยู่เหนือองค์ประกอบใด

ตัวอย่างเช่นหากเมาส์ของผู้ใช้อยู่เหนือพื้นที่ข้อความนี้ (พร้อม id wmd-input) การโทรwindow.which_element_is_the_mouse_on()จะเทียบเท่ากับฟังก์ชัน$("#wmd-input")จะเป็นหน้าที่เทียบเท่า

Question 2

การสาธิต

มีฟังก์ชั่นเด็ด ๆ ที่เรียกว่าdocument.elementFromPointซึ่งทำในสิ่งที่ดูเหมือน

สิ่งที่เราต้องการคือหา x และ y coords ของเมาส์แล้วเรียกมันโดยใช้ค่าเหล่านั้น:

var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

document.elementFromPoint

วัตถุเหตุการณ์ jQuery

Question 3

ในเบราว์เซอร์รุ่นใหม่คุณสามารถทำสิ่งต่อไปนี้:

document.querySelectorAll( ":hover" );

นั่นจะทำให้คุณมีรายการ NodeList ของรายการที่เมาส์อยู่ในลำดับเอกสาร องค์ประกอบสุดท้ายใน NodeList มีความเฉพาะเจาะจงมากที่สุดแต่ละองค์ประกอบก่อนหน้าควรเป็นพ่อแม่ปู่ย่าตายายและอื่น ๆ

Question 4

แม้ว่าสิ่งต่อไปนี้อาจไม่ได้ตอบคำถามจริงๆเนื่องจากนี่เป็นผลลัพธ์แรกของการใช้ googling (googler อาจไม่ได้ถามคำถามเดียวกันทั้งหมด :) หวังว่าจะให้ข้อมูลเพิ่มเติม

มีสองวิธีที่แตกต่างกันในการรับรายการองค์ประกอบทั้งหมดที่เมาส์ใช้งานอยู่ในขณะนี้ (สำหรับเบราว์เซอร์รุ่นใหม่อาจ):

แนวทาง "โครงสร้าง" - โครงสร้าง DOM จากน้อยไปมาก

ในคำตอบของเดอร์แมนเราสามารถโทร

var elements = document.querySelectorAll(':hover');

อย่างไรก็ตามสิ่งนี้ถือว่ามีเพียงเด็ก ๆ เท่านั้นที่จะซ้อนทับบรรพบุรุษของพวกเขาซึ่งโดยปกติจะเป็นเช่นนั้น แต่ไม่เป็นความจริงโดยทั่วไปโดยเฉพาะอย่างยิ่งเมื่อจัดการกับ SVG ที่องค์ประกอบในกิ่งก้านต่างๆของต้นไม้ DOM อาจทับซ้อนกัน

แนวทาง "ภาพ" - ขึ้นอยู่กับ "ภาพ" ที่ทับซ้อนกัน

วิธีนี้ใช้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;
}

ลองทั้งสองอย่างและตรวจสอบผลตอบแทนที่แตกต่างกัน

Question 5

elementFromPoint()ได้รับเฉพาะองค์ประกอบแรกในโครงสร้าง DOM ซึ่งส่วนใหญ่ไม่เพียงพอสำหรับความต้องการของนักพัฒนา หากต้องการรับองค์ประกอบมากกว่าหนึ่งรายการเช่นตำแหน่งตัวชี้เมาส์ปัจจุบันนี่คือฟังก์ชันที่คุณต้องการ:

document.elementsFromPoint(x, y) . // Mind the 's' in elements

สิ่งนี้ส่งคืนอาร์เรย์ของออบเจ็กต์องค์ประกอบทั้งหมดภายใต้จุดที่กำหนด เพียงแค่ส่งค่า X และ Y ของเมาส์ไปที่ฟังก์ชันนี้

ข้อมูลเพิ่มเติมอยู่ที่นี่: DocumentOrShadowRoot.elementsFromPoint ()

สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับคุณอาจใช้คำตอบนี้เป็นทางเลือก

Question 6

วางเมาส์เหนือฟองเหตุการณ์เพื่อให้คุณสามารถใส่ผู้ฟังคนเดียวบนเนื้อความและรอให้ฟองขึ้นจากนั้นคว้า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));">

Question 7

รหัสต่อไปนี้จะช่วยให้คุณได้รับองค์ประกอบของตัวชี้เมาส์ องค์ประกอบผลลัพธ์จะแสดงในคอนโซล

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

Question 8

คุณสามารถดูเป้าหมายของmouseoverงานเกี่ยวกับบรรพบุรุษที่เหมาะสม:

var currentElement = null;

document.addEventListener('mouseover', function (e) {
    currentElement = e.target;
});

นี่คือการสาธิต

Question 9

<!-- 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. -->

Question 10

การสาธิต: D

เลื่อนเมาส์ของคุณในหน้าต่างข้อมูลโค้ด: D

<script>
document.addEventListener('mouseover', function (e) {
    console.log ("You are in ", e.target.tagName);
});
</script>

ขยายข้อมูลโค้ด

Question 11

เป้าหมายของmousemoveเหตุการณ์ DOM คือองค์ประกอบ DOM ที่อยู่บนสุดใต้เคอร์เซอร์เมื่อเลื่อนเมาส์:

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

คล้ายกับโซลูชันของ @Philip Walton แต่ไม่ต้องใช้ jQuery หรือ setInterval

Question 12

คุณสามารถใช้ตัวเลือกนี้เพื่อบ่อนทำลายวัตถุจากนั้นจัดการเป็นวัตถุ jQuery:

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

Question 13

นี่เป็นวิธีแก้ปัญหาสำหรับผู้ที่อาจยังคงดิ้นรน คุณต้องการเพิ่ม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)
});

สาธิตเกี่ยวกับ CodePen

Question 14

ให้ฉันเริ่มด้วยการบอกว่าฉันไม่แนะนำให้ใช้วิธีที่ฉันกำลังจะแนะนำ มันมากดีกว่าที่จะใช้พัฒนาเหตุการณ์ขับเคลื่อนและผูกกิจกรรมเฉพาะองค์ประกอบที่คุณสนใจในการรู้หรือไม่ว่าเมาส์จะเป็นไปด้วยmouseover, mouseout, mouseenter,mouseleaveฯลฯ

หากคุณต้องมีความสามารถในการรู้ว่าเมาส์อยู่บนองค์ประกอบใดคุณจะต้องเขียนฟังก์ชันที่ผูกไฟล์mouseoverเหตุการณ์กับทุกอย่างใน DOM จากนั้นจัดเก็บองค์ประกอบปัจจุบันที่อยู่ในตัวแปรบางตัว

คุณสามารถทำสิ่งนี้ได้:

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ทุก ๆ วินาทีและบันทึกองค์ประกอบที่เมาส์อยู่ในคอนโซล

http://jsfiddle.net/LWFpJ/1/