图像映射 - 如何在悬停时显示工具提示以及仅在鼠标停止时显示

Question

我是一个 javascript 初学者，我在为图像映射正确显示工具提示（作为 div）时遇到了问题。

我希望仅当光标位于某个元素（在标签内定义）上并且仅当鼠标停在该元素上时才显示工具提示。

我不知道为什么添加的 addEventListener 方法会导致在执行 onmouseout 事件后也显示工具提示，即当光标离开给定元素时。

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>

Answer 1

您的 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/。

图像映射 - 如何在悬停时显示工具提示以及仅在鼠标停止时显示

Image map - how display tooltip on hover and only when mouse stops

javascript

tooltip

imagemap