1

現在、 http ://picselbocs.com/projects/goalcandy (ユーザー: demo@demo.com、パスワード: demo)にセットアップされているインタラクティブな Web アプリケーションに取り組んでいます。画像やテキストを含むアイテムを左側のサイドバーから右側のワークスペースにドラッグし、サイズ変更/編集などを行うことができます。

作成されたオブジェクトのテキストを編集するには、タイトルまたはコメントのテキスト フィールドをクリックするだけです。その要素は、コンテンツを編集できる<span>に置き換えられます。<textarea>「ぼかし」イベントが発生すると、テキストエリアが消え、その値が<span>要素に追加されます。問題は、オブジェクトの画像をクリックすると (画像とテキスト フィールドの両方がある場合)、「ぼかし」イベントが発生しないことです。

次のスニペットを使用して、画像が親オブジェクトとは別にドラッグされないようにしましたが、これが問題の原因であることがわかりました。しかし、私はこれを使用することはできず、同時に使用しない必要があります:

$(document).on('mousedown dragstart', 'img', function(event) { event.preventDefault(); });

この問題を回避し、画像をクリックしても onblur イベント ハンドラーを実行できるようにしながら、同時にデフォルトの動作防止を維持するにはどうすればよいですか?

PS: このalert('blur')呼び出しにより、イベントがいつ発生するかを監視できます。

4

1 に答える 1

1

あなたはいくつかの変数を使用します

var locks = {}; 
locks.textarea_lock = false;

次に、画像ハンドラーで設定されたテキストエリアをクリックして、locks.textarea_lock = true;このロックを確認します。

$(document).on('mousedown dragstart', 'img', function(event) { 
    if (locks.textarea_lock) {
        return;
    }
    event.preventDefault(); 
});

「blur」ハンドラでは、変数のロックを解除しますlocks.textarea_lock = false;。

于 2012-05-08T10:13:18.063 に答える