Question

在我们的所有页面上，顶部显示了一条重要信息。当页面加载时，该消息看起来像浅灰色背景的纯红色文本（与页面的其余部分相同）。如果用户想要更新它，他们可以点击它并调用editMsg函数，这使它看起来像一个常规的文本输入和一个＆＃34; Save＆＃34;按钮将出现在右侧。

我的任务是取消更新，如果用户通过将所有内容恢复到原始外观而将鼠标移到封闭div之外。我试过了布鲁尔，但我似乎无法做任何事情！

看起来很简单，但是如果我将鼠标移到文本输入之外但仍然在div中，它会调用cancelMsgChg函数。我尝试了几种不同的cancelBubble（IE）和stopPropagation（FF）而没有运气。事实上，如果他们处于不同的元素，我不明白为什么我需要这些。

我整个上午都在追逐我的尾巴，在这里阅读一些帖子，但是在一小时之内会有更多的丢失！

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

但我得到一个＆＃34;目标未定义＆＃34;错误。所以...＆＃39; e＆＃39;根本没有定义？

Answer 1

On blur对你没有任何帮助，因为你没有使用任何表单元素（输入，选择，textarea）。

即使将鼠标移动到div内部的一个元素中，也会触发mouseOut事件。您可以在触发mouseOut事件时检查鼠标的位置，以查看它是否正在输入其中一个封闭的div。有关详细信息，请参阅http://www.quirksmode.org/js/events_mouse.html。

Answer 2

你的问题是双重的。一个是鼠标悬停在内部元素上会触发父节点上的鼠标输出，第二个是让内部元素触发该元素上的鼠标输出，它会向父节点冒泡。

要解决此问题，您需要检查事件的目标并查看鼠标的去向，并且只有在您的父元素的鼠标输出时才运行您的代码，并且只能在您的父元素之外运行。这是一个简单的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!");
}

在小提琴中，我有一个外部div，内联定义了onmouseout处理程序。如果您观看控制台，您将看到如果您鼠标指向外部div然后退出，则会触发mouseout事件。但是，如果将鼠标移动到外部div中，然后移动到内部div中，您还将获得mouseout事件。最后，如果你离开内部div（但仍然在外部div中），你将获得另一个mouseout事件！

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

2 个答案: