5773


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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-02-02T06:41:34.653
5753
2015-02-02T08:56:50.070
2015-02-02T08:49:23.073
8023
8023
question
javascript html
blur時にdivを挿入すると何をクリックしているかが分からない


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

[code]

    document.body.onclick = function(event){console.log(event)};
    
[/code]

ではなく

[code]

    layer.onclick = function(event){console.log(event)};
    
[/code]

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

追記：  
もしかしてイベントバブリングの話ですか？  
要素に対してクリックイベントのバブリングを`stopPropagation()`等でキャンセルしない場合、`body`までイベントが伝搬します。  
[イベントバブリング](http://uhyohyo.net/javascript/3_3.html)  
[JavaScriptのイベント伝播について覚書](http://linuxserver.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/javascript/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BC%9D%E6%92%AD.php)

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

[code]

    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)};
    }
    
[/code]

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


CC BY-SA 3.0
2015-02-02T07:06:09.903
5757
2015-02-02T08:56:50.070
2015-02-02T08:56:50.070
7214
7214
5753
answer


`tab button` と `layer` に `onmousedown` と `onmouseup` を入れて動作させると、

  1. `tab button` の `onmousedown` が発火する。
  2. `input` の `onblur` が発火する。
  3. `layer` が追加される。
  4. `layer` の `onmouseup` が発火する。

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

なので、

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

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


CC BY-SA 3.0
2015-02-02T08:41:00.433
5773
2015-02-02T08:41:00.433
2992
5753
answer