title: Triggering a custom jQuery event without bubbling
body: <p>I want to trigger a non-bubblable custom jQuery event on an object. I know we can either use return false or stopPropagation to prevent bubbling. What I want to know is can I trigger a custom event and specify that by default it does not bubble.</p>
  
  <p>This is the code I have now</p>
  
  <pre><code>        $(".abc").on("change", function () {
              var e = new $.Event("datachange");
              $(this).trigger(e)
          });
  </code></pre>
  
  <p>The above triggers the datachange event on #abc and bubbles the event all the way up. I don't want that. I can achieve that by using the following.</p>
  
  <pre><code>        $(".abc").on("change", function () {
              var e = new $.Event("datachange");
              //e.stopPropagation(); this does not work
              $(this).trigger(e)
          }).on("datachange", function (e) {
              e.stopPropagation();
              return false;
          });
  </code></pre>
  
  <p>I read that triggerHandler does something similar, but only for the first matching element.</p>
  
  <p>Is there a better way to achieve this?</p>