Javascript: élément obtenir dans l'arbre dom quand mouseover

Lorsque vous utilisez:Javascript: élément obtenir dans l'arbre dom quand mouseover

document.onmouseover = function(e) {}

Y at-il une propriété qui me donne l'élément dans l'arbre dom?

Par exemple, je peux définir un style à e.srcElement Mais, comment puis-je accéder ultérieurement à cet élément pour (par exemple) réinitialiser son style? Et comment puis-je savoir à quel endroit dans le dom tree c'est? Je veux être en mesure de le situer dans le vidage de la page entière.

Merci beaucoup.

Pour résoudre le problème au sujet de l'élément reaccessing plus tard, j'ai essayé cela, mais il ne fonctionne pas:

var lastelem; 

document.onmouseover = function(e) { 

    if (lastelem != null){ 
    lastelem.style.border = "0px"; 
    } 

    if (e===undefined) e= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 
    document.getElementById('display').value = target.tagName; 
    target.style.border = "1px"; 
    lastelem = target; 
};

Merci

Source

2010-04-25 oimoim

C'est un élément DOM ordinaire. Vous pouvez le traiter normalement - par ex. l'enregistrer pour plus tard dans une variable qui est dans une portée externe, ou en utilisant 'parentElement' et similaires pour le localiser dans l'arbre. –

(window.event.srcElement est IE seulement Pour tous les autres navigateurs c'est event.target.) – bobince

Oui, vous avez raison sur srcElement. Toutefois, si je veux définir un style pour cet élément ou cette cible. Mais plus tard d'une autre fonction. Par exemple, j'ai essayé cela, mais ça ne marche pas ... http://pastebin.com/qrSjsY4C merci! – oimoim

Which HTML element is the target of the event? (sur Quirksmode.org, par Peter-Paul Koch). Regardez également le target attribute de l'objet Event dans le modèle d'événement W3C DOM Level 2.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>target test</title> 
    <style> 
     *  { border: 1px solid #fff } 
     .trigger { background: lightgreen } 
    </style> 
    </head> 
    <body> 
    <p class="trigger">Trigger testCase().</p> 
    <p class="trigger">Trigger testCase().</p> 
    <p class="trigger">Trigger testCase().</p> 
    <p id="display"></p> 
    <script> 
var lastelem; 

document.onmouseover = function (e) { 
     var event = e || window.event; 

     if (lastelem) { 
       lastelem.style.border = "1px solid #fff"; 
     } 

     var target = event.target || event.srcElement; 
     document.getElementById('display').innerHTML = target.previousSibling.tagName + 
      " | " + target.tagName + " | " + (target.nextSibling ? target.nextSibling.tagName : "X"); 
     target.style.border = "1px solid"; 
     lastelem = target; 
}; 
    </script> 
    </body> 
</html>

Source

2010-04-25 21:31:32

Oui, j'ai déjà lu ceci. Merci. Ce dont j'ai besoin est une documentation avec toutes les propriétés de parentElement, srcElement/target, ... Et aussi un moyen de localiser l'élément dans l'arbre dom. Dites, si je veux mettre en surbrillance le parentElement dans la source de l'événement que j'ai reçu avec le mouseover. Comment puis-je atteindre cet objectif ? – oimoim

Marcel Korpel: Cela fonctionne très bien! Merci. Maintenant, je dois juste trouver un moyen d'afficher les balises environnantes. Je pense que je vais essayer avec precedsibling et nextsibling. – oimoim

@oimoim: En effet: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling –

Javascript: élément obtenir dans l'arbre dom quand mouseover

Répondre

Questions connexes