jquery.stopPropagation.js

/**
 * jQuery plugin that can be used as a shortcut 
 * to stop JS-events from bubbling.
 * 
 * See this stackoverflow post for more information:
 * http://stackoverflow.com/questions/18968847/stop-js-event-propagation-on-table-row-click/
 * 
 * Usage: 
 * - Add the attribute or class "no-bubble" to a element.
 *   <button no-bubble /> or <button class="no-bubble" />
 * 
 * Advanced usage:
 *  - Call the stopPropagation method on a jQuery object:
 * 
 *    $(selector).stopPropagation(events);
 * 
 *    @param (String) events = (optional) event names separated by space.
 *
 *    Examples: 
 * 
 *      $(selector).stopPropagation(); //Prevents propagation for click events.
 *      $(selector).stopPropagation('click keydown'); //Prevents propagation for click and keydown events.
 */
(function($) {
  'use strict';
    
  /**
   * Stop the event from bubbling up the DOM-tree.
   * 
   * @param {String events} (optional, default 'click') - The event that we should stop propagation for.
   */
  $.fn.stopPropagation = function(events) {    
    //TODO: May need to call the off event first, but this will also remove previous events...
    return this.on(events || 'click', function(e) {
      e && e.stopPropagation();
      return true;
    });
  };

  /**
   * Stop the event from bubbling up the DOM-tree.
   * Searches for nodes with "no-bubble" attribute, and nodes with .no-bubble class.
   * 
   * @param {String events} (optional, default 'click') - The event that we should stop propagation for.
   */
  $.stopPropagation = function(events) {
    $('*[no-bubble]')
      .add('.no-bubble')
      .stopPropagation(events);
  };
  
  // init
  $(function() {
    $.stopPropagation();  
  });
  
}(jQuery));