时间戳

首页 > 解决方案 > 是否可以仅使用 javascript 而没有库来找出鼠标当前指向（而不是单击）的元素的 id？

javascript - 是否可以仅使用 javascript 而没有库来找出鼠标当前指向（而不是单击）的元素的 id？

问题描述

我的 html 页面中几乎没有单独的元素彼此相邻。

我想在鼠标位于其中一个元素上时显示某些内容，并在鼠标远离它们时隐藏它。

如果我只使用 mouseon/mouseout 事件，当我在正确的元素之间移动鼠标时，我会在想要显示的内容上出现一些闪烁。

对于解决方案，我想我可以创建一组正确的元素 ID，然后检查鼠标是否指向数组的任何元素。但是如果不点击它就找不到获取元素 id 的方法。

那么是否有可能在没有 jquery 或其他库的情况下获取鼠标当前悬停或指向的元素的 id？

HTML部分：

<div id="navigationBarContainer">
    <ul id="navigationBarList">
      <li>Naujienos</li>
      <li id="dropDownBarControl">Veikla
        <ul id="dropDownBar" class="hideList">
          <li id="preschool" class="hide">Pradine</li>
          <li id="middleschool" class="hide">Pagrindine</li>
          <li id="highschool" class="hide">Abiturientai</li>
          <li id="grownups" class="hide">Suauge</li>
          <li id="conferences" class="hide">Konferencijos</li>
          <li id="other" class="hide">Teminiai</li>
        </ul><!--end of dropDownBar-->
      </li>
      <li>Kainorastis</li>
      <li>Registracija
        <ul>
          <li id="forStudents" class="hide">Mokiniams</li>
          <li id="forGrownups" class="hide">Suaugusiems</li>
        </ul><!--end of dropDownBar-->
      </li>
      <li>Kontaktai</li>
    </ul><!--end of navigationBarList-->
  </div><!--end of navigationBarContainer-->

和 Javascript：

function showItem(name){//make item visable    
  document.getElementById(name).classList.remove("hide");   
}
function hideItem(name){//make item hidden
  document.getElementById(name).classList.add("hide");
}
document.getElementById('dropDownBarControl').addEventListener("mouseover", function(){
  document.getElementById('dropDownBar').classList.replace("hideList", "showList");
  var links = ["preschool","middleschool","highschool","grownups","conferences","other"];
  var time = 0;
  links.forEach(function(element){
    time = time + 20;
    setTimeout(function(){
      showItem(element);
    }, time);
  });
});

document.getElementById('dropDownBar').addEventListener("mouseout", function(){
  document.getElementById('dropDownBar').classList.replace("showList", "hideList");
  var links = ["other","conferences","grownups","highschool","middleschool","preschool"];
  var time = 0;
  links.forEach(function(element){
    time = time + 20;
    setTimeout(function(){
      hideItem(element);
    }, time);
  });
});

标签： javascript

解决方案

当底层元素发生变化时，监听鼠标移动和跟踪。

用途document.elementAtPoint(x,y);

let element = undefined;
document.addEventListener('mousemove', (event) => {
  let x = event.pageX;
  let y = event.pageY;
  
  let newElement = document.elementFromPoint(x,y);
  if(!element || element !== newElement) {
    element = newElement;
    console.log(element.id||element);
  }
  
});
<div id="navigationBarContainer">
    <ul id="navigationBarList">
      <li>Naujienos</li>
      <li id="dropDownBarControl">Veikla
        <ul id="dropDownBar" class="hideList">
          <li id="preschool" class="hide">Pradine</li>
          <li id="middleschool" class="hide">Pagrindine</li>
          <li id="highschool" class="hide">Abiturientai</li>
          <li id="grownups" class="hide">Suauge</li>
          <li id="conferences" class="hide">Konferencijos</li>
          <li id="other" class="hide">Teminiai</li>
        </ul><!--end of dropDownBar-->
      </li>
      <li>Kainorastis</li>
      <li>Registracija
        <ul>
          <li id="forStudents" class="hide">Mokiniams</li>
          <li id="forGrownups" class="hide">Suaugusiems</li>
        </ul><!--end of dropDownBar-->
      </li>
      <li>Kontaktai</li>
    </ul><!--end of navigationBarList-->
  </div><!--end of navigationBarContainer-->

推荐阅读