javaScript pour déterminer quel élément p est survolé pour appeler le gestionnaire d'événements

Je construis un site pour un détaillant. Je travaille sur la page de leurs emplacements de magasin, qui a 4 emplacements de rue différents. Chaque adresse est enveloppée dans son propre tag de paragraphe. Les quatre paragraphes se trouvent dans un conteneur div dont l'ID est "box_1".javaScript pour déterminer quel élément p est survolé pour appeler le gestionnaire d'événements

J'ai écrit un gestionnaire d'événements qui modifie la couleur d'arrière-plan de l'élément du premier paragraphe. Cependant, je ne veux pas écrire le même code redondant pour les 3 autres paragraphes, si je n'ai pas à le faire.

Je veux que JS détermine d'abord quel paragraphe est survolé et prenne sa position dans le tableau et le charge dans les parenthèses dans le gestionnaire d'événements. Exemple: passez la souris sur le paragraphe 2 et chargez "1" dans l'élément [1] .onmouseover = function() {// mon code};

Ci-dessous est le code que j'ai jusqu'à présent:

<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"; 
};

Source

2015-10-04 CP Creative Studio

D'abord, attachez l'événement au div. Dans la fonction onmouseover, vous pouvez avoir un nom de variable event. Ensuite, appelez event.target pour que l'élément déclenche l'événement.

Vous pouvez également implémenter onmouseout pour effacer l'arrière-plan. Voici le code. Vous pouvez le tester sur JsFiddle. Pour plus d'informations sur event.target, veuillez consulter W3Schools.

Source

2015-10-05 01:07:38 AnhTriet

Vous pouvez le faire avec css, pas besoin de le javascript. Si vous devez utiliser js pour une raison quelconque, associez l'événement à la div et utilisez la cible de l'événement pour sélectionner l'élément p correct.

<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>

Source

2015-10-04 23:46:57 Shilly

javaScript pour déterminer quel élément p est survolé pour appeler le gestionnaire d'événements

Répondre

Questions connexes