onMouseOut events happening in the wrong elements?

On all of our pages, there's an important message displayed across the top. The message looks like plain red text against a light gray background (same as the rest of the page) when the pages loads. If the user wants to update it, they can click on it and call the editMsg function, which makes it look like a regular text input and a Save button will appear to the right.

I'm tasked with cancelling the update if the user moves the mouse outside the enclosing div by returning everything to its original appearance. I tried onBlur but I can't seem to get it to do anything!

It seems simple enough, but if I move the mouse outside of the text input but still in the div, it invokes the cancelMsgChg function. I tried several variations of cancelBubble (IE) and stopPropagation (Firefox) with no luck. In fact, I don't see why I'd need these if they are in different elements.

The HTML is:

<div id="update_message" onMouseOut="cancelMsgChg('onMouseOut');" >
<br />

    <input id="message" onclick="editMsg();" 
     type="text" value="My message"
     style="background:#DDDDDD; color:#DD0000; font-weight:bold; border:0;" />

    <button id="save_message" style="display:none;" 
     class="btn" onclick="return saveHeaderMsg('Save Header Message',  
     document.getElementById('message').value);">Save Message</button>

<br /><br />
</div>

UPDATE:

I removed the onMouseOut event from the div tag and added an event listener for when the mouse is clicked outside the div:

if (document.addEventListener) {
  document.addEventListener("click", cancelMsgChg('click'), false);
} else if (document.attachEvent) {
  // IE
  document.attachEvent("onclick", cancelMsgChg('onclick'), false); 
}

function cancelMsgChg(e) {
      
  console.log ("in cancelMsgChg");

  // In Internet Explorer you should use the global variable `event`  
  e = e || event; 

  // In Internet Explorer you need `srcElement`
  var target = e.target || e.srcElement;

  var id = target.id;
  
  console.log ("id = " + id);
  
  if ( id != "update_message" ) {
    //reset everything
  }
}

But I get a "target is undefined" error. So... e is not defined at all?

Solution

You problem is two fold. One is that mousing over an inner element triggers mouseout on the parent, and second is leaving the inner element is triggering a mouseout on that element that bubbles to the parent.

To get around this you need to examine the target of the event and look at where the mouse is going, and only run your code if the mouseout if from your parent element and is to something outside of your parent. Here's a simple fiddle to demonstrate:

<div class="outer" onmouseout="mouseout(event)">
    <div class="inner"></div>
</div>

function mouseout(event) {
  console.log(event.target);
  console.log(event.relatedTarget);
  console.log("mouseout!");
}

In the fiddle, I have an outer div with the onmouseout handler defined inline. If you watch the console, you'll see that if you mouse in to the outer div and then back out, the mouseout event will fire. However, if you move the mouse into the outer div, and then into the inner div, you will also get a mouseout event. And finally, if you move out of the inner div (but still in the outer div) you will get another mouseout event!