是否有可能找出元素鼠标的ID,目前指向(不点击)只有JavaScript的,没有库? [重复]

问题描述 投票:-3回答:1

这个问题已经在这里有一个答案:

我有几个不同的元素在我的html页面旁边对方。

我想说明的某些内容,而鼠标在这些元素中的一个,并把它隐藏在鼠标移动远离他们。

如果我只是用mouseon /鼠标移开事件,我得到一些闪烁的内容我想告诉我的时候正确的移动元素之间的鼠标。

对于溶液我想我可以创建的正确的元素ID的一个阿雷,然后检查是否鼠标在任何数组元素的指向。但不能找到一种方式来获得元素的ID没有点击它。

所以是有可能得到的元素鼠标的ID是目前徘徊或没有的jQuery或其他库的指点?

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
1个回答
0
投票

监听鼠标移动和轨道当底层元件的变化。

使用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-->
© www.soinside.com 2019 - 2024. All rights reserved.