Ember Gesture does not avoid to bubble up.

example.handlebars

<!-- id = touch-test -->

  {{#view Yvi.TouchHoldView id="hold" }}

    <div id="hold-scroller">
      <div id="hold-scroller-container">

        <div/><div/><div/><div/><div/><div/><div/><div/>
        <div/><div/><div/><div/><div/><div/><div/><div/>

        </div>
    </div>

  {{/view }}

example.js

Yvi.TouchHoldView = Em.View.extend({

  touchHoldOptions: {
    holdPeriod: 200,
    moveThreshold: 40
  },
  classNameBindings: ['isOn'],
  isOn: true,

  touchHoldEnd: function(recognizer) {

    this.set('isOn', !this.get('isOn') );
  }

});

Yvi.ExampleView = Em.View.extend({
  elementId: 'touch-test',
  templateName: 'example'


});

style.css

#touch-test {

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

}

#hold {
  position: relative;
  width: 100%;

  background-color: yellow;

}
#hold.is-on {

  background-color: purple;

}

#hold-scroller {
  overflow-y: auto !important; 
  -webkit-overflow-scrolling: touch;
}


#hold-scroller-container {
  width: 100%;
  height: 80px;

}

#hold-scroller-container > div {

  width: 100%;
  height: 20px;

}

#hold-scroller-container > div:nth-child(even) {

  background-color: red;

}