marionette - dom events leaking from parent to child view

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.5/backbone.marionette.min.js"></script>
<div id="root-region"></div>

JavaScript

// NOTE: this fiddle use ES6 template strings

var Child = Mn.ItemView.extend({

		attributes: {
        style: "border: 1px solid red; margin: 5px;"
    },
    
    template: _.template(`
        <p>child view</p>
		    <button class="btn-save">save</button>
    `),

    ui: {
        saveButtonChild: "button.btn-save"
    },

    events: {
        "click @ui.saveButtonChild": function(e){
            alert("this is the child view handler!");
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    },

});

var Parent = Mn.LayoutView.extend({

		attributes: {
        style: "border: 1px solid blue; padding: 5px;"
    },
    
    template: _.template(`
    	<p>parent view</p>
    	<button class="btn-save">save</button>
      
      <div class="some-region"></div>
    `),

    ui: {
        saveButtonParent: " button.btn-save",
        someRegion: "div.some-region"
    },

    events: {
        "click @ui.saveButtonParent": function(e){
            alert("this is the parent view handler!");
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    },

    onBeforeAttach: function(){
        this.getRegion("someRegion").show(new Child);
    },

    regions: {
        someRegion: '@ui.someRegion'
    }

});

var mainRegion = new Mn.Region({ el: "div#root-region"});
mainRegion.show(new Parent);