在我们所有的页面上,顶部都会显示一条重要消息。页面加载时,消息看起来像浅灰色背景(与页面其余部分相同)的纯红色文本。如果用户想要更新它,他们可以点击它并调用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'根本没有定义?