Geek asks and answers

Onmouseout does not start when an item leaves

I have a mouseover event that fires a tooltip; I want this tooltip to disappear when the mouse has been removed. onmouseout works well unless the item leaves.

Here is a distilled example that uses background changes instead of prompts (so you can easily run it):

<div id="bar">
  <div onmouseover="document.bgColor='gray'" onmouseout="document.bgColor='white'" style="border:1px solid black;">
   <span onclick="document.getElementById('bar').innerHTML = ''">Remove me</span>
  </div>
</div>

The problem is this: when I click “Delete Me”, my mouse is no longer “above” the DIV, but onmouseout does not work because it is gone. I would like this example to return to a white background when I click Delete Me.

There is an obvious solution that I would like to avoid. I do not want the onclick handler to delete the item manually in order to “fix” the document. This is because there can be arbitrarily many handlers that can remove divs using onmouseout. In general, all mouse and deletion handlers can be generated dynamically and need to know about each other. To complicate the situation, I could have a case where the removable elements are nested in each other, and any of them can be removed. (I could remove this restriction, but it will take a bit of work.)

, : , ""; , , , . , O ( * ), DOM. , , , , .

, : onremovedfromdocument, onmouseout onremovedfromdocument, . ( , jQuery , , jQuery.)

: , , . , seppuku. . (, , !)

:. , onmouseout , , , ,

, : JS, . , ( .) , , , , , , , . node node, . , , . , , .

+5
2

DOMNodeRemoved. :

var div = document.getElementsByTagName('div')[0];
div.addEventListener('DOMNodeRemoved', function(e){
    document.bgColor='white';
});​

http://jsfiddle.net/HX88L/

, . . MDN - .

+2

:

    <script>
    var liveToolTip = new Array();
    function addLiveToolTip(elName){
        if(elName in liveToolTip){
        }else{
            liveToolTip[elName]=1;}
    }
    function removeLiveToolTip(elName){
        if(elName in liveToolTip){
            delete liveToolTip[elName];
        }
    }
    function runOnMouseOuts() {
        for(mouseOut in liveToolTip) {
            document.getElementById(mouseOut).onmouseout();
        }
    }
</script>
<div id="bar">
  <div onmouseover="addLiveToolTip(this.id);document.bgColor='gray'" 
        onmouseout="removeLiveToolTip(this.id);document.bgColor='white'" style="border:1px solid black;" id="foo">
      <span onclick="document.getElementById('bar').innerHTML = '';runOnMouseOuts()">
      Remove me</span>
  </div>

0

More articles:


All Articles