Как настроить событие 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 () в объявление дочернего события, потому что именно диспетчер решает, будет ли событие распространяться или нет.

Context

Я обновляю старыйпроект.В jQuery 1.5.1 диспетчер работал, но в более новых версиях он не работает.

Как настроить событие jQuery так, чтобы оно не распространялось за пределы целевого элемента до его запуска.