1

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

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

看起来很简单，但是如果我将鼠标移到文本输入之外但仍在 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
  }
}

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

4

2 回答 2

1

由于您没有使用任何表单元素（输入、选择、文本区域），因此模糊对您没有任何帮助。

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

于 2013-01-11T20:42:33.070 回答
0

你的问题是双重的。一个是鼠标悬停在内部元素上会触发父级的鼠标移出，第二个是离开内部元素会触发该元素上的鼠标移出，该元素会冒泡到父级。

为了解决这个问题，您需要检查事件的目标并查看鼠标的去向，并且仅在 mouseout 来自父元素并且指向父元素之外的内容时才运行您的代码。这是一个简单的小提琴来演示：

<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!");
}

在小提琴中，我有一个带有内联定义的 onmouseout 处理程序的外部 div。如果您观察控制台，您会看到如果您将鼠标移入外部 div 然后退出，则将触发 mouseout 事件。但是，如果您将鼠标移到外层 div 中，然后再移到内层 div 中，您也会得到一个 mouseout 事件。最后，如果您移出内部 div（但仍然在外部 div 中），您将获得另一个 mouseout 事件！

于 2013-01-11T21:07:22.180 回答