javaScript 确定悬停在哪个 p 元素上以调用事件处理程序

Question

我正在为一家零售商建立一个网站。我正在处理他们的商店位置页面，该页面有 4 个不同的街道位置。每个街道地址都包含在自己的段落标记中。所有四个段落都在一个 div 容器中，该容器的 ID 名为“box_1”。

我编写了一个事件处理程序来更改第一段元素的背景颜色。但是，如果没有必要，我不想为其他 3 段编写相同的冗余代码。

我想让JS先判断鼠标悬停在哪个段落上，然后在数组中取其位置，然后在事件处理程序中将其加载到括号中。示例：将鼠标悬停在第 2 段上并将“1”加载到 element[1].onmouseover = function() {// my code};

下面是我目前的代码：

<div id="box_1">
<p>18901 Kansas Avenue, Jimmytown, NE </p>
<p>5015 Cornman Lane, Crybaby, MN </p>
<p>847 Halfstack Avenue, Crumble, GA </p>
 </div>

// javaScript:
var divPoint = document.getElementById("box_1"); // ID for the div
var mousePoint = divPoint.getElementsByTagName("p"); // p elements inside div

// mouseover event handler
mousePoint[0].onmouseover = function() {
mousePoint[0].style.backgroundColor = "#a80";
};

Answer 1

您可以使用 css 执行此操作，不需要 javascript。如果您出于某种原因必须使用 js，请将事件附加到 div 并将事件目标用于 select 正确的 p 元素。

<html>
<head>
    <title>title</title>
    <style>
        #box_1 > p:hover {
            background-color: #a80;
        }
    </style>
</head>
<body>
<div id="box_1">
    <p>18901 Kansas Avenue, Jimmytown, NE </p>
    <p>5015 Cornman Lane, Crybaby, MN </p>
    <p>847 Halfstack Avenue, Crumble, GA </p>
</div>
</body>
</html>

Answer 2

首先，将事件附加到 div。在onmouseover函数中，可以有一个变量名event。然后，调用event.target获取触发事件的元素。

您可能还想实施 onmouseout 以清除背景。这是代码。

var divPoint = document.getElementById("box_1");

divPoint.onmouseover = function(event) {
    var element = event.target;

    if (element.tagName.toLowerCase() === 'p') {
        element.style.backgroundColor = "#a80";
    }
};

divPoint.onmouseout = function(event) {
    var element = event.target;

    if (element.tagName.toLowerCase() === 'p') {
        element.style.backgroundColor = "#fff";
    }
};

您可以在 JsFiddle.

上进行测试

有关event.target的更多信息，请查看W3Schools。

javaScript 确定悬停在哪个 p 元素上以调用事件处理程序

javaScript to determine which p element is being hovered over to invoke event handler

javascript

onmouseover

event-handling