1

input.blur時に独自のエラーボックスを出すことを想定したプログラムで
focus状態で「tab button」をclickしようとした場合tabもlayerもクリックされていないようですが一体何がクリックされているのでしょうか?

<div id="tab" onclick="console.log('tab Click')">tab button</div>
<input type="text" onBlur="document.body.appendChild(layer)" /><br />

<style type="text/css">
    .layer{background-color:#F00;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;}
 </style>
 <script type="text/javascript">
    var layer = document.createElement("div");
    layer.className = "layer";
    document.body.onclick = function(event){console.log(event)};
 </script>

2 件の回答 2

1

挿入されたdiv要素(ここでいうlayer)がクリックされます。

document.body.onclick = function(event){console.log(event)};

ではなく

layer.onclick = function(event){console.log(event)};

がやりたいことではないですか?

追記:
もしかしてイベントバブリングの話ですか?
要素に対してクリックイベントのバブリングをstopPropagation()等でキャンセルしない場合、bodyまでイベントが伝搬します。
イベントバブリング
JavaScriptのイベント伝播について覚書

追記2:
質問のコードを実行エラーにならないよう修正して確認しました。

var layer = document.createElement("div");
layer.className = "layer";

window.onload = function() {
    document.body.onclick = function(event){console.log(event)};
    layer.onclick = function(event){console.log(event)};
}

結論としては「clickイベントは発生していない」です。
blurイベントが起きたときにclickイベントは無視されている・・・のではなくマスクされた要素の影響でmouseupイベントが来ないためonclickにならないんですね(ohgaさんの回答参照)。

4
  • document.body.onclick = function(event){console.log(event)}; はデバッグ用でtoElementがdiv.layerやdiv#tabにならないでbodyになるのはどういう意味なのかを知りたかったのです
    – banaboza
    Commented 2015年2月2日 7:38
  • 最終的にバブリングされてbodyのclickが発生するのは分かっているのですがクリックの発生元は何になるのだろうと思いまして。 個人的にはtabをclickする直前にlayerが挿入されることによりtabがクリック出来ないのかとも思ったのですがlayerがクリックされている訳でもなさそうなので。
    – banaboza
    Commented 2015年2月2日 8:08
  • 少なくともFirefoxでは修正コードでlayerがクリックされていますが・・・tabがクリックできないのはz-indexの値がlayerの方が大きく(明示的に指定しているわけではないが)、マスクされてしまっているからではないですか?
    – kotatsu
    Commented 2015年2月2日 8:14
  • あぁすみません質問をよく読んでいませんでした・・・focus時にtabクリックですか。質問のコードではそもそもdocument.bodynullとなっており、実行エラーになっています。
    – kotatsu
    Commented 2015年2月2日 8:21
0

tab buttonlayeronmousedownonmouseup を入れて動作させると、

  1. tab buttononmousedown が発火する。
  2. inputonblur が発火する。
  3. layer が追加される。
  4. layeronmouseup が発火する。

と動いているのがわかると思います。

なので、

  • tab button は、 onmouseup が動いてないので onclick が発火しない。
  • layer は、 onmousedown が動いてないので onclick が発火しない。

といったところだと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。