title: event.preventDefault vs event.stopPropagation
body: <p>Can someone explain what's the difference between <code>event.preventDefault()</code> and <code>event.stopPropagation()</code>?</p>
  
  <p>I have a table and within that table I have an img tag.</p>
  
  <p>When I click the img tag, I want to see a popup.</p>
  
  <p>But I also want to stop the selection of multiple rows, so I use:</p>
  
  <pre><code>$("table.items tbody tr").click(function(event) {
          event.stopPropagation();
      });
  </code></pre>
  
  <p>When I use the js code, the popup does not appear;</p>
  
  <p>If I delete the js code, the popup works.</p>
  
  <pre><code>$(".info").live("click",function(e){
      //console.log('ok');
      e.stopPropagation();
      var elem = $(this);
      var id = $(this).attr("id").replace("image_","container_");
      $('#'+id).toggle(100, function() {
          if($(this).css('display') == 'block') {
              $.ajax({
                  url: "$url",
                  data: { document_id:elem.attr('document_id') },
                  success: function (data) {
                      $('#'+id).html(data);
                  }
              });
              }
          });
  });
  </code></pre>
  
  <p>Why?</p>