如何配置jQuery事件，使其在触发前不传播

Question

我知道在SO上有很多类似的问题，但是没有一个可以解决这种情况。

考虑以下代码：

//elements
var parent = $("#parent");
var button = $("button");
var version = $('#version');

version.text('jQuery ' + jQuery.fn.jquery);

//dispatcher
var eventDispatcher = {
  trigger: function(targetElement, eventName) {
    var ev = new jQuery.Event(eventName);
    ev.stopPropagation();
    jQuery(targetElement).trigger(ev);
  }
}

//events
version.bind('custom', function(){
  button.text('version custom');
});

parent.bind('custom', function(){
  button.text('parent custom');
});

button.bind("click", function(){
  eventDispatcher.trigger(version, 'custom');
});

body { background: #333; padding: 20px; font-family: Helvetica; }

#parent { background: #0c0; padding: 20px; font-size: 25px; 
  text-align: center; margin: 0 auto; width: 300px; }

button { background: #fff; border: none; border-radius: 5px;
  padding: 8px 14px; font-size: 15px; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="parent">
  <p id="version">jQuery Version</p>
  <button>Change color</button>
</div>

调度程序必须仅触发子元素的事件。 我不能仅仅将stopPropagation（）放在孩子的事件声明上，因为是由调度程序来决定事件是否要传播。

上下文

我正在升级一个旧项目。在jQuery 1.5.1中，调度程序可以工作，但在较新的版本上却不能。

在触发事件之前，如何配置jQuery事件以使其不传播到目标元素之外。