[解決済み] event.preventDefault()を使用した後にイベントを発生させる方法
2022-04-20 06:36:31
質問
あるイベントを発射する準備ができるまで保持したい。
$('.button').live('click', function(e){
e.preventDefault();
// do lots of stuff
e.run() //this proceeds with the normal event
}
に相当するものはありますか?
run()
という関数があります。
どのように解決するのですか?
いいえ。一度キャンセルされたイベントは、キャンセルされます。
しかし、カスタムコードがすでに実行されているかどうかを判断するためのフラグを使用して、後でイベントを再実行することができます - このような(露骨な名前空間汚染は無視してください)。
var lots_of_stuff_already_done = false;
$('.button').on('click', function(e) {
if (lots_of_stuff_already_done) {
lots_of_stuff_already_done = false; // reset flag
return; // let the event bubble away
}
e.preventDefault();
// do lots of stuff
lots_of_stuff_already_done = true; // set flag
$(this).trigger('click');
});
より一般化されたバリエーション(グローバルな名前空間の汚染を避けるという利点もある)は、次のようになります。
function onWithPrecondition(callback) {
var isDone = false;
return function(e) {
if (isDone === true)
{
isDone = false;
return;
}
e.preventDefault();
callback.apply(this, arguments);
isDone = true;
$(this).trigger(e.type);
}
}
使用方法
var someThingsThatNeedToBeDoneFirst = function() { /* ... */ } // do whatever you need
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));
ボーナスの超ミニマムなjQueryプラグインで
Promise
をサポートします。
(function( $ ) {
$.fn.onButFirst = function(eventName, /* the name of the event to bind to, e.g. 'click' */
workToBeDoneFirst, /* callback that must complete before the event is re-fired */
workDoneCallback /* optional callback to execute before the event is left to bubble away */) {
var isDone = false;
this.on(eventName, function(e) {
if (isDone === true) {
isDone = false;
workDoneCallback && workDoneCallback.apply(this, arguments);
return;
}
e.preventDefault();
// capture target to re-fire event at
var $target = $(this);
// set up callback for when workToBeDoneFirst has completed
var successfullyCompleted = function() {
isDone = true;
$target.trigger(e.type);
};
// execute workToBeDoneFirst callback
var workResult = workToBeDoneFirst.apply(this, arguments);
// check if workToBeDoneFirst returned a promise
if (workResult && $.isFunction(workResult.then))
{
workResult.then(successfullyCompleted);
}
else
{
successfullyCompleted();
}
});
return this;
};
}(jQuery));
使用方法
$('.button').onButFirst('click',
function(){
console.log('doing lots of work!');
},
function(){
console.log('done lots of work!');
});
関連
-
[解決済み] jQueryです。簡単なオーバーレイを作成するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
-
[解決済み] jQuery checkbox checked state changed event
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】$(window).width()がメディアクエリとは違う
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught SyntaxError: 予期しない入力の終了
-
[解決済み] jest.fn()の値はモック関数またはスパイである必要があります。
-
[解決済み] jQuery select onChangeの値を取得する。
-
[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか?
-
[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法
-
[解決済み] クリックボタンでクリップボードにコピー
-
[解決済み] jQueryの複数要素の同一クリックイベント
-
[解決済み] jQuery セレクタ。Id Ends With?
-
[解決済み] jQuery OR Selector?
-
[解決済み】jQueryで入力不可属性をトグルする。