JavaScriptでのイベントバブリングの理解

Question

私はバブリングさえも理解しようとしていました。私は、StackOverflowと同様の方法でデータをフォームに入力し始めたら、自分のウェブサイトにページを残しているときにユーザに警告することができるように、それについて読んで始めました。

次のコードは、クロスブラウザを動作するようです：

var entereddata = false; 

$(document).ready(function() 
{ 
    $('#contactform').bind('keypress',function(e) { 
      if((e.which > 96 && e.which < 123) || (e.which > 47 && e.which < 58)) { 
        entereddata = true; 
        //alert(e.which); 
      } 
    }); 
}); 

function confirmLeave(e, d) 
{ 
    if(!e) e = window.event;//window.event; 
    if(!d) d = entereddata; 

    var confirmationMessage = 'It appears you have started to enter information into the contact form, but have not yet submitted it'; 

    if(!d) 
    { 
      e.cancelBubble = true; 
    } else 
    { 
      return confirmationMessage; 
    } 
} 

window.onbeforeunload=confirmLeave; 

私はしたくない、フォーム、のための送信ボタンをクリックしたときしかし、これも呼び出されます。私はそのような追加するなど、コードに様々な追加を試してみた：

if($('#submit').click()){ 
    submitted=true; 
} else { 
    submitted=false; 
} 

をしてから（！d）の場合、メインコードに（！D & &がfalse ==提出）場合に変更します。ただし、このボタン（および送信ボタンがクリックされていない場合にのみページを起動させるためのすべての組み合わせ）は機能しません。送信ボタンをクリックしても警告が表示されるか、何かがクリックされた！

これは、私がイベントバブリングプロセスを理解していないという事実に沸きかかっているかもしれません。なぜ私はe.cancelBubble = trueが必要かわかりません。私はそれを持っている場所で。

だから、私の2つの主な問題は次のとおりである：私は送信ボタンがクリックされたかどうかを確認し、それが

をクリックされないとeventBubblingを理解する場合にのみ警告を表示しない方法

• 。たとえば、入力したデータがtrueの場合、バブル処理には影響しません。私はすべきですか？入力データがfalseの場合はe.cancelBubble = falseを、入力データがtrueの場合はe.cancelBubble = trueを設定する必要がありますか？ e.cancelBubbleの値を設定すると実際にページを閉じるときにどんな効果がありますか？

は、Firefox、イベントバブリングをサポートしているので、私は、まったくe.stopPropagation イベントを必要としない考えで、私も正しいのですか？

長い投稿にはお詫び申し上げます。誰にも助けてもらえるよう、事前に感謝します。

おかげで、 クリス

Answer 1

何なコードを持っていることについて？

$('#submit').click(function() { 
    entereddata = false; 
}); 

これは即ちconfirmLeave前に実際のフォームの送信前に呼び出されるべきでは実行されているので、フラグを低下させることがトリックを行うべきです。あなたは、ブラウザの上を移動したい場合は...

$('#submit').click(function() { 
    window.onbeforeunload=null; 
}); 

私はあなたがこの例ではバブリングを心配する必要はないと思う

nullを返す：

Answer 2

onbeforeunload「リスナー」を削除してください...ユーザーに尋ねるか、あなたは彼が上かどうかを移動させたい場合は、ブラウザがユーザに尋ねる警告を表示したい場合は、文字列を返すことなく、

function confirmLeave(e) { 
    e = e || window.event;//window.event; 

    var confirmationMessage = 'It appears you have started to enter information into the  contact form, but have not yet submitted it'; 

    if(entereddata) { 
      return confirmationMessage; 
    } else { 
      return null; 
    } 
} 

バブリングと伝播は「イベントに適用されますそれは子供や親、そして私が窓を知っている限りそれを知らせるべきです。onbeforeunloadは伝播されないグローバルイベントです。

Answer 3

泡立ちとは無関係の

ていますが、キーが押されたかどうかを検出をバイパスし、代わりに、フォームのデータをチェックすることができ：

function hasNonemptyTextInputs() { 
    var textInputs = $('#contactform :input').filter(':text, textarea'); 

    // Check for any field with a nonempty value 
    // .is() returns true iff the function returns true on any element 
    return textInputs.is(function() { 
     return $(this).val().length > 0; 
    }); 
} 

Answer 4

をJSでバブリングイベントを理解するためには、私がイベントにあなたの癖モードの紹介をお勧めします。

をチェックアウトhttp://www.quirksmode.org/js/events_order.html（このサイト内のイベントのリンクとセクションはすべて）