如何解決 - 它被渲染後

頁面加載之後，javascript中的底層代碼
的XML讀取XML，包含了一些領域的DIV元素閃爍/立即消失-ids，和相應的內容，當鼠標懸停在字段ID中的彈出窗口來顯示列出

我的代碼生成一束彈出窗口的作爲DIV元素與樣式

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

.hide{ 
display:none; 
}

所有創建的彈出窗口都附加到根元素。

編輯：新增的腳本片段

事件處理程序連接如下

// 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'; 

}

我的問題是 - 爲什麼元素閃光燈，並立即消失，而不是掛在鼠標移開事件？

問候，阿布舍克巴克

來源

2009-11-30 Everyone

提供了更多的代碼。你如何附加你的事件處理程序？ – 2009-11-30 11:38:37

已更新帖子以攜帶我已有的腳本。想想任何人？ – Everyone 2009-12-01 05:16:53

更改在JavaScript中的元素可以被修改被懸停在元件，其可以通過改變，而不是實際移動鼠標移出座標的觸發鼠標移出事件。

來源

2009-11-30 11:41:43 harriyott

首先，您需要更加註意區分大小寫。它應該是clientWidth（大寫W）和top（小t）。其次，當您設置CSS left和top時，您必須爲該值添加+'px'後綴;一個整數本身是無效的。

此外，如果你想知道視口的高度，document.body是錯誤的地方看。這隻會在IE怪癖模式下工作，你通常想避免這種瘟疫。添加標準模式<!DOCTYPE聲明，您可以跨瀏覽器使用document.documentElement。（或window.innerHeight對非IE瀏覽器的分支。）

，除非有更多的CSS你是不是向我們展示，設置left和top風格不會有任何影響，因爲在所有的.render的div不position: absolute任何情況下，。您沒有顯示它們如何連接到文檔，但由於它們顯然不是絕對定位的，它們是文檔流的一部分，並且可能會導致頁面在未被隱藏時移動/重排。如果這會導致元素被移動，它將不再位於指針之下，您將立即得到一個mouseout事件。

（這也將有絕對定位發生，如果懸停項目是彈出出現的位置的下面。）

（此外，隱藏/取消隱藏是有點多餘。別理style.display和剛剛成立className到'render'或'render hide'）。

來源

2009-11-30 12:07:20 bobince

如何解決 - 它被渲染後

回答

相關問題