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

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

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

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

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

shi_ue

2016/03/24 08:07

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

行動規範の内容に同意します

回答2件

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

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

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

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

投稿2016/03/24 09:13

ps13zier

総合スコア433

IDLOCK

2016/03/24 10:35

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

行動規範の内容に同意します

ベストアンサー

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