마우스 커서가 어떤 요소 위에 있는지 알려주는 함수를 원합니다.
예를 들어, 사용자의 마우스가이 텍스트 영역 (id 포함 wmd-input) 위에 있으면 호출 window.which_element_is_the_mouse_on()은 기능적으로 다음과 같습니다.$("#wmd-input")
답변
데모
document.elementFromPoint소리를내는 정말 멋진 함수 가 있습니다.
우리에게 필요한 것은 마우스의 x와 y 좌표를 찾아서 그 값을 사용하여 호출하는 것입니다.
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);답변
최신 브라우저에서는 다음을 수행 할 수 있습니다.
document.querySelectorAll( ":hover" );그러면 현재 문서 순서대로 마우스가 위에있는 항목의 NodeList가 제공됩니다. NodeList의 마지막 요소는 가장 구체적이며 앞의 각 요소는 부모, 조부모 등이어야합니다.
답변
다음은 실제로 질문에 대답하지 않을 수 있지만 이것은 인터넷 검색의 첫 번째 결과이기 때문에 (googler가 정확히 같은 질문을하지 않을 수도 있습니다.), 추가 입력을 제공하기를 바랍니다.
실제로 마우스가 현재 위에있는 모든 요소의 목록을 가져 오는 두 가지 방법이 있습니다 (최신 브라우저의 경우).
“구조적”접근 방식-오름차순 DOM 트리
dherman의 답변에서와 같이
var elements = document.querySelectorAll(':hover');그러나 이것은 자식 만 조상을 오버레이한다고 가정합니다. 이는 일반적으로 일반적이지만 일반적으로 사실이 아닙니다. 특히 DOM 트리의 다른 분기에있는 요소가 서로 겹칠 수있는 SVG를 다룰 때 그렇습니다.
“시각적”접근 방식- “시각적”중첩 기반
이 방법은 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;
}둘 다 시도하고 서로 다른 수익을 확인하십시오.
답변
elementFromPoint()DOM 트리의 첫 번째 요소 만 가져옵니다. 이것은 대부분 개발자의 요구에 충분하지 않습니다. 예를 들어 현재 마우스 포인터 위치에서 둘 이상의 요소를 얻으려면 다음이 필요한 함수입니다.
document.elementsFromPoint(x, y) . // mind the 's' in elements이것은 주어진 지점 아래의 모든 요소 객체의 배열을 반환합니다. 이 함수에 마우스 X 및 Y 값을 전달하기 만하면됩니다.
자세한 정보 : https://developer.mozilla.org/en-US/docs/Web/API/document/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.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})답변
mouseover적절한 조상 에서 이벤트 의 대상을 볼 수 있습니다 .
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});