Карта изображений - как отображать всплывающую подсказку при наведении и только при остановке мыши

#javascript #tooltip #imagemap

#javascript #всплывающая подсказка #карта изображений

Вопрос:

Я новичок в javascript, и у меня возникла проблема с корректным отображением всплывающей подсказки (в виде 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>

Развернуть фрагмент кода

Ответ №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 /.