CSSのresizeで要素の大きさが変更された時にその要素の変更後のサイズを取りたい

Question

###前提・実現したいこと
CSSのresizeで要素の大きさが変更された時にその要素の変更後のサイズを取りたい。

###発生している問題・エラーメッセージ
現状は要素をクリックした時に要素のサイズを取得しているのですが、ドラッグしたまま要素外でマウスを離すとクリックイベントが発火しません。そのため、取れる場合と取れない場合ができてしまいます。
クリックイベント以外に良い方法はありますでしょうか。

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryは使えない状況です。

demoです。
https://jsfiddle.net/r2oyggej/2/

Comments

[shi_ue]

実現したとことと、発生している問題が全然別ですけど？何がしたいのかわかりません。「発生している問題」のクリックがドラッグの間違いですか？あと、ソースもよろしくです。

Answer 1

要素の mousedown からブラウザの領域外の mouseup を捉えたい。という質問でしょうか？

上記だとクリックイベントは起こらないのが正常な挙動だと思いますので、画面外でも捉えようとすると、document.onmouseup 辺りで捉えてみるのは、どうでしょうか？

demo では一つを対象にしているため、直接書いても良いと思いますが、もし、複数の要素を対象にするのであれば、onmousedown のタイミングで変数なりに対象を確保しておき、onmouseup で変数が null 以外の場合は、それを調べて対処した後に変数を null にクリアすれば解決するのではないでしょうか？

以上、ご参考になれば幸いです。

Comments

[IDLOCK]

ps13zierさん
御回答ありがとうございます。
onmouseup を使ったやり方でできました。
ありがとうございました。

Answer 2

var size = document.getElementById("sample").clientHeight;
document.onmouseup = function() {
  if (size != document.getElementById("sample").clientHeight) {
    console.log('resize');
  }
  size = document.getElementById("sample").clientHeight;
}
```もうこれでいいんじゃないかと。

Comments

[IDLOCK]

shi_ueさん
御回答ありがとうございます。

chromeで右下のドラッグできる部分をドラッグしたまま、マウスを右にずらして要素外で離しても発火出来ますでしょうか？

[IDLOCK]

mousedownでは変更後のサイズではなく、変更前の値が取れてしまうのです。
やはり難しいのでしょうか。

[shi_ue]

mousedownがだめならmouseupでどうでしょう？あ、だめですね。要素の外ですからね。
setIntervalで大きさを監視するのがよさそうだけど、何のために？

[IDLOCK]

shi_ueさん
目的の機能ができました。
ありがとうございました。