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

フォーム要素（input、select、textarea）を使用していないため、ぼかしでは何もしません。

マウスがdiv内の要素の1つに移動された場合でも、mouseOutイベントがトリガーされます。mouseOutイベントがトリガーされたときにマウスがどこに向かっているのかを確認して、囲まれたdivの1つに入っているかどうかを確認できます。詳細については、 http：//www.quirksmode.org/js/events_mouse.htmlを参照してください。

于 2013-01-11T20:42:33.070 に答える
0

あなたの問題は2つあります。1 つは、内側の要素の上にマウスを置くと、親でマウスアウトがトリガーされることです。2 つ目は、内側の要素を離れると、親にバブルするその要素でマウスアウトがトリガーされることです。

これを回避するには、イベントのターゲットを調べてマウスの移動先を確認し、マウスアウトが親要素からのもので、親要素の外側にある場合にのみコードを実行する必要があります。デモ用の簡単なフィドルを次に示します。

<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 に答える