Comment résoudre - clignote élément DIV/disparaît immédiatement après avoir été rendu

Question

Voici ce qui se passe

• Après le chargement de la page, javascript lit un fichier XML à partir du code sous-jacent
• Le XML contient un tas de champ -ids et le contenu correspondant à afficher dans popups lorsque la souris survole un champ id liste

Mon code génère un tas de popups comme div-éléments avec les styles

.render{ 
background-color: #fffc80; 
border:    .1em solid rgb(200, 128, 0); 
padding-left:  2px; 
padding-right:  2px; 
z-index:    1000; 
} 

.hide{ 
display:none; 
} 

Tous les popups créés sont attachés à l'élément racine.

ÉDITÉE: Script Ajouté snippets

Les gestionnaires d'événements sont fixés comme suit

// instantiate a div element 

var myDiv = document.createElement('div'); 

// generate an ID 

myDiv.id = generatePopupId(getFieldId()); 

// attach the content from the XML into the new div element 

myDiv.innerHTML = getPopupContent(); 

// apply mouseover/out handlers to the main element 

document.getElementById(getFieldId()).onmouseover = function(){ 
    showPopup(generatePopupId(getFieldId())); 
}; 

document.getElementById(getFieldId()).onmouseout = function(){ 
    hidePopup(generatePopupId(getFieldId())); 
}; 


// read the X coordinate of the present position of the mouse 

function getX(){ 
    var e = window.event; 
    posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
    return posX; 
} 

// read the Y coordinate of the present position of the mouse 

function getY(){ 
    var e = window.event; 
    posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    return posY; 
} 

// Show the popup element at the current mouse location 

function showPopup(popupId){ 
    var posX = getX(); 
    var posY = getY(); 

    var poppyElement = document.getElementById(popupId); 

    poppyElement.className = 'render'; 
    poppyElement.style.left = posX; 
    poppyElement.style.top = poxY; 
    poppyElement.style.position = 'absolute'; 
    poppyElement.style.display = ''; 

} 

// hide the popup element 

function hidePopup(popupId){ 
    var poppyElement = document.getElementById(popupId); 

    poppyElement.className = 'hide'; 

} 

Ma question est - Pourquoi le flash de l'élément, et disparaissent immédiatement au lieu de traîner pour l'événement de la souris sur ?

Regards, Abhishek

Answer 1

Modification des éléments du JavaScript peuvent être modification de l'élément étant plané au-dessus, ce qui peut déclencher la souris sur l'événement en changeant, plutôt que de déplacer effectivement la souris sur les coordonnées.

Answer 2

Tout d'abord, vous devez être plus prudent avec la sensibilité à la casse. Il devrait être clientWidth (capital W) et top (petit t). Deuxièmement, lorsque vous définissez CSS left et top, vous devez ajouter un suffixe +'px' à la valeur; un nombre entier en lui-même n'est pas valide.

De plus, si vous voulez connaître la hauteur de la fenêtre, document.body est le mauvais endroit pour regarder. Cela ne fonctionnera que dans le mode IE Quirks, que vous voulez généralement éviter comme la peste. Ajoutez une déclaration en mode standard <!DOCTYPE et vous pouvez utiliser document.documentElement dans tous les navigateurs. (Ou branche sur window.innerHeight pour les navigateurs non IE.)

Dans tous les cas, sauf si il y a plus CSS que vous ne nous montrez, la définition des styles left et top aura aucun effet parce que les .render divs ne sont pas position: absolute . Vous ne montrez pas à quel point ils sont attachés au document, mais comme ils ne sont apparemment pas positionnés de manière absolue, ils font partie du flux de documents et peuvent faire que la page change ou se rediffuse lorsqu'ils ne sont pas affichés. Si cela provoque le déplacement de l'élément devant être déplacé, il ne sera plus sous le pointeur et vous obtiendrez immédiatement un événement mouseout.

(Ce serait aussi le cas avec le positionnement absolu si l'élément plané était sous l'endroit le pop-up est apparu.)

(En outre, la dissimulation/démasquage est un peu redondant. Laissez seul style.display et juste mis className soit 'render' ou 'render hide'.)