[解決済み] JavaScriptでウィンドウのサイズ変更を検出する ?
2022-07-06 10:33:39
質問
ユーザーがブラウザのウィンドウサイズを変更したときに、jQueryまたはJavaScriptで関数をトリガーする方法はありますか?
他の言葉で言うと
- ユーザがブラウザのウィンドウサイズを変更したときに、mouse up イベントを検出できますか?そうでなければ
- ウィンドウのリサイズ操作が終了したとき、検出することができますか?
私は現在、ユーザーがウィンドウのサイズ変更を開始したときに、jQueryでイベントをトリガすることができるだけです。
どのように解決するのですか?
あなたは
.resize()
のようにすると、実際に幅や高さが変わるたびに取得できます。
$(window).resize(function() {
//resize just happened, pixels changed
});
動作デモはこちらでご覧いただけます。 を実行すると、新しい height/width の値が取得され、ページ内で表示されるように更新されます。 このイベントは実際には 開始 または 終了 を使用すると、リサイズが発生したときに "happens" が発生するだけで、別のリサイズが発生しないとは言い切れません。
編集します。 コメントにより、あなたは"on-end"イベントのようなものを望んでいるようですが、あなたが見つけた解決策は、いくつかの例外を除いてこれを行います(マウスアップと一時停止をクロスブラウザで区別することができず、同じことがイベントにもあてはまります)。 終了 と ポーズ ). あなたは 作成 を作成することができます。
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
これをどこかのベースファイルにすることもできますし、やりたいことは何でもできます...そして、その新しい
resizeEnd
イベントにバインドすることができます。
$(window).bind('resizeEnd', function() {
//do something, window hasn't changed size in 500ms
});
関連
-
JSアレイループと効率解析の比較
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
jQueryのコピーオブジェクトの説明
-
vue ディレクティブ v-html と v-text
-
Vueの「データを聴く」原則を解説
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
jq は html ページとデータを動的に分割する。