Skip to main content
編集済みの本文
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31

挿入された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さんの回答参照)
Should blur or mousedown fire first?

挿入された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イベントは無視されているようです。

どうもブラウザ依存あるようです。
Should blur or mousedown fire first?

挿入された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さんの回答参照)

本文に 153 文字追加
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31

挿入された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イベントは無視されているようです。

どうもブラウザ依存があるようです。
Should blur or mousedown fire first?

挿入された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イベントは無視されているようです。

挿入された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イベントは無視されているようです。

どうもブラウザ依存があるようです。
Should blur or mousedown fire first?

本文に 372 文字追加
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31

挿入された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イベントは無視されているようです。

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

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

ではなく

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

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

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

挿入された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イベントは無視されているようです。

本文に 139 文字追加
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31
読み込んでいます
本文に 139 文字追加
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31
読み込んでいます
ソース リンク
kotatsu
  • 2,142
  • 4
  • 17
  • 31
読み込んでいます