javascript - onMouseOut 事件发生在错误的元素中？

Question

在我们所有的页面上，顶部都会显示一条重要消息。页面加载时，该消息看起来像浅灰色背景下的纯红色文本(与页面的其余部分相同)。如果用户想要更新它，他们可以单击它并调用 editMsg 函数，这使得它看起来像常规文本输入，并且一个 Save 按钮将出现在对。

如果用户将鼠标移到封闭的 div 之外，将所有内容恢复到其原始外观，我的任务是取消更新。我尝试了 onBlur 但我似乎无法让它做任何事情!

这看起来很简单，但如果我将鼠标移到文本输入之外但仍在 div 中，它会调用 cancelMsgChg 函数。我尝试了 cancelBubble (IE) 和 stopPropagation (Firefox) 的几种变体，但没有成功。事实上，如果它们位于不同的元素中，我不明白为什么我需要它们。

HTML 是:

<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>

更新:

我从 div 标记中删除了 onMouseOut 事件，并添加了一个事件监听器，用于在 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
  }
}

但我收到“目标未定义”错误。那么... e 根本没有定义？

Answer 1

模糊对您没有任何作用，因为您没有使用任何表单元素(输入、选择、文本区域)。

即使鼠标移动到 div 内的元素之一，也会触发 mouseOut 事件。当 mouseOut 事件被触发时，您可以检查鼠标的移动方向，看看它是否正在进入这些封闭的 div 之一。请参阅http://www.quirksmode.org/js/events_mouse.html了解更多信息。