检测某个元素是否被悬停答案

【问题标题】：Detect if a certain element is being hovered检测某个元素是否被悬停
【发布时间】：2020-07-05 09:43:16
【问题描述】：

我想检测是否有任何输入元素被悬停在上面。我下面的这段代码不起作用，因为 .hover() 函数在 if 语句发生后激活（这对我来说很奇怪）。那么还有其他方法可以做到这一点吗？

function createInput(event) {
   thing = 0;
     $("input").hover(function() {
       thing = 1;
     })

     if (thing == 0) {
//create a new input bar
     }
   }

（我不想为此使用 jquery，因为它不起作用）

我想要这样的东西，但是下面的代码仅适用于您想要查看是否悬停具有 ID 的某个元素的情况。如果您想查看是否所有带有某个标签的元素都被悬停，它将不起作用：

function isHover(e) {
 return (e.parentElement.querySelector(':hover') === e);
}


var myDiv = document.getElementById('mydiv');;
document.addEventListener('mousemove', function checkHover() {
 var hovered = isHover(myDiv);
 if (hovered !== checkHover.hovered) {
   console.log(hovered ? 'hovered' : 'not hovered');
   checkHover.hovered = hovered;
 }
});

--pure javascript to check if something has hover (without setting on mouseover/out)

【问题讨论】：

标签： javascript html

【解决方案1】：

由于您的问题被标记为 javascript：

<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

<script>
function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>

对于其他找到问题的人这是 OP 的解决方案（通用）

 var createInput = 0;
 var inputNumber = 0 ;
  // Case: some Inputs are already defined so we attach the event listener to these
var hoverElements = document.getElementsByClassName("hoverElement");
    for (var i = 0; i < hoverElements.length; i++) {
        hoverElements[i].addEventListener("onmouseover", function(event){
            createInput = 1;
            inputNumber = i+1;
            createNewInput(inputNumber);
            }

    function createNewInput(inputNumber){
    // ...called when mouse pointer enters object ...
   createInput = 0;   // We change the overall state var has tobe unlocked by some other event otherwise hovering would create 100reds of inputs, e.g. finishing input in the last field sets it again to 1
 inputNumber = inputNumber +1;  // Increment the number to get unique IDs
    var template = document.getElementById("inputTemplate").cloneNode(true);
    template.setAttribute("id", "input" + inputNumber);
 ... somemore styling and functions you need ...

    document.getElementById("divWeAppendTo").appendChild(template);


  .... some logic to attach the event listener to the new input (see above how its done)

    }

【讨论】：

我不完全确定这会改变什么。我想要一些告诉我类似的东西：如果 inputHovered == true，不要这样做。
是的，我理解我提供的功能意味着您必须将事件侦听器附加到您需要它的所有对象（当指针进入该区域时是 onmouseover，离开时是 onmouseout）您必须附加您需要的所有对象的事件监听器。喜欢看我的编辑
但这不只是将 onmouseover 函数添加到所有创建的元素中吗？这与以前对所有输入都使用 .hover 函数有何不同？我需要将事物设置回 0，因为如果用户没有将鼠标悬停在输入上，则应该创建另一个输入。这就是为什么我需要某种真假陈述。
是的，这将代替 doSomethingFunction() ==> 创建新的 Input 函数并附加事件侦听器。你怎么做取决于你的整体程序逻辑。例如。完全 JS 生成的 HTML 与模板化的 HTML 与基本的修复 HTML，您通过 JS 添加一些元素。
查看我的编辑，例如模板案例。并阅读 cmets 作为帮助