나는 자바 스크립트 초보자이고 이미지 맵에 대한 도구 설명을 div로 올바르게 표시하는 데 문제가 있습니다.
도구 설명은 커서가 요소 (태그 내에 정의 됨) 위에있을 때와 마우스가 그 위에있을 때만 나타나기를 원합니다.
추가 된 addEventListener 메서드로 인해 onmouseout 이벤트가 실행 된 후에도, 즉 커서가 주어진 요소를 떠날 때 툴팁이 표시되는 이유를 모르겠습니다.
https://jsfiddle.net/1b5mf06j/2/
function myFuncHide(el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'none';
}
function myFunc (el) {
var tooltip = document.getElementById('myTooltip');
var timeout;
document.addEventListener('mousemove', moving);
function moving() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(mouseStop, 450);}
function mouseStop() {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'block';}
}#myTooltip {
padding: 15px;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
display: none;
}<img src="http://tutorialspoint.com//images/usemap.gif" class="locations-map-full" alt="" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="73,168,32" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="rect" coords="22,83,126,125" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
</map>
<div id="myTooltip"> <p><img src="http://getbootstrap.com/apple-touch-icon.png" width="150px" height="150px" style="border: 1px solid #9b9999;"></p> </div>귀하의 mousemove청취자는에 document관계없이 마우스 (사실, 추가 청취자가이 지역을 입력으로 쌓여지고 계속)가는 곳의 효과 객체와 숙박.
다음은 mouseout이벤트에 정리를 추가하는 코드 재 배열입니다 . 리스너를 제거하고 시간 초과 변수를 지 웁니다.
또한 일반적인 코드 정리 작업을 수행했습니다. 더 나은 함수 이름. 일부 중복을 제거했습니다 (DRY 기억-반복하지 마십시오). 들여 쓰기. :)
var timeout;
var tooltipEl = document.getElementById('myTooltip');
function mouseMoving() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function() {
tooltipEl.style.display = 'block';
}, 450);
}
function ingress () {
document.addEventListener('mousemove', mouseMoving);
}
function egress() {
// cleanup
if (timeout) clearTimeout(timeout)
document.removeEventListener("mousemove", mouseMoving)
tooltipEl.style.display = 'none';
}
https://jsfiddle.net/alucheni/xmf5tjeh/25/ 에서 작동하는 버전을 볼 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다