Как установить автоматическое скрытие для не существует и на основе элемента? - PullRequest
Новая
       22

Как установить автоматическое скрытие для не существует и на основе элемента?

0 голосов
/ 18 июня 2019

Я пытаюсь создать собственную всплывающую подсказку JavaScript, но проблема в том, что элемент (на котором запущена всплывающая подсказка) может быть случайно удален, а подсказка не скрывается. 


  function getPosition(obj) {
     /* http://www.boughner.us/kirupa/element_position.html */
     let rect,X=0,Y=0;
     if (obj) {
         rect=obj.getBoundingClientRect();
         X=rect.left + (window.scrollX || window.pageXOffset);
         Y=rect.top + (window.scrollY || window.pageYOffset);
     }
     return {x: X, y: Y}
  }

  function tooltipshow(el, text) {
      var position = getPosition(el);
      var toootip = document.createElement('div'),
      toootip.setAttribute('id', 'tooltip');
      toootip.style.top = position.y + el.offsetHeight;
      toootip.style.left = position.x;
      toootip.insertAdjacentHTML('afterbegin', '<div class=\"text\">' + text + '</div><div class=\"tail\"></div>');
      document.body.insertAdjacentElement('beforeend', toootip);
  }


<span onmouseover='tooltipshow(this, "tooltip text....")'>text</span>

Mouseout не может использоваться,потому что во время наведения мыши событие может быть удалено, а всплывающая подсказка не скрыта ...

Я думаю о setInterval (), но не уверен, что это хорошая идея - проверка каждые 0,05 с (нужно быть быстрым) излишне обременительна.Какая-то идея?

Ответы [ 3 ]

1 голос
/ 18 июня 2019

Вы можете немного изменить создание всплывающей подсказки, чтобы сообщить элементу, который вызывает генерацию всплывающей подсказки, о его существовании.Что-то вроде 

var toolTipCounter=0;
      function tooltipshow(el, text) {
          var position = getPosition(el);
          var toootip = document.createElement('div'),
          el.toolTip="toolTip" + toolTipCounter;
          toootip.id=el.toolTip;
          toolTipCounter++;
          toootip.style.top = position.y + el.offsetHeight;
          toootip.style.left = position.x;
          toootip.insertAdjacentHTML('afterbegin', '<div class=\"text\">' + text + '</div><div class=\"tail\"></div>');
          document.body.insertAdjacentElement('beforeend', toootip);
      }

Так что, когда вы удаляете родительский элемент, проверяйте, не является ли его свойство .tooltip неопределенным, и если оно не удаляется из DOM. 

document.getElementById(el.toolTip).parentNode.removeChild(document.getElementById(el.toolTip));
0 голосов
/ 18 июня 2019 
    function getPosition(el) {
      let rect,
        x = 0, y = 0;
      if (el) {
        rect = el.getBoundingClientRect();
        x = rect.left + (window.scrollX || window.pageXOffset);
        y = rect.top + (window.scrollY || window.pageYOffset);
      }
      return {left: x, top: y};
    }

    function tooltiphide(el) {
      document.querySelector('#' + el.tooltipID).remove();
    }

    function tooltipshow(el, name, text) {
      var position = getPosition(el),
        tooltip = document.createElement('div'),
        tooltipName = 'tooltip-' + name + '-' + Math.floor(Math.random() * 9999999999) + 1;
      el.tooltipID = tooltipName;
      tooltip.setAttribute('id', tooltipName);
      tooltip.setAttribute('class', 'tooltip');
      tooltip.style.top = position.top + el.offsetHeight;
      tooltip.style.left = position.left;
      tooltip.insertAdjacentHTML('afterbegin', '<div class=\"text\">' + text + '</div><div class=\"tail\"></div>');
      document.body.insertAdjacentElement('beforeend', tooltip);
    }

<span onmouseover='tooltipshow(this, "type1", "tooltip text....")' onmouseout='tooltiphide(this)'>text</span>

Теперь легко скрыть подсказку по идентификатору, код вызова после изменения DOM: 

  document.querySelectorAll('div[id^=\"tooltip-type1\"]').remove();

@ скрыть ваше решение с помощью el.toolTip="toolTip" + toolTipCounter было полезно, спасибо

0 голосов
/ 18 июня 2019

Не уверен, что я правильно понял ваш вопрос. Если вам нужно обнаружить удаление элемента, вы можете использовать Mutation Observer для обнаружения удаления элемента. 

const element = document.getElementById('element');

const observer = new MutationObserver(mutationsList => {
    if(mutationsList[0].removedNodes) {
        console.log('A child node has been removed.');
    };
});

observer.observe(element.parentElement, { childList: true });
...