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