Событие переопределяет RactiveJS

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

var template = new Ractive({
  el: 'wrapper',
  template: '<div on-click="open">OPEN<div on-click="close">CLOSE</div></div>'
});

template.on({
  open: function(e) {
    alert('opening');
  },
  close: function() {
    alert('closing');
  }
});
div > div {
  display: inline-block;
  padding: 10px;
  background: rgba(0, 0, 0, .3);
  padding: 10px 10px 10px 50px;
  cursor: pointer
}
<script src="https://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="wrapper"></div>


ractivejs
person Eduard    schedule 01.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете остановить всплытие события DOM, вызвав его метод stopPropagation. Аргумент event, передаваемый обработчикам событий Ractive, сохраняет исходное событие DOM как event.original, поэтому вы можете сделать это так:

var template = new Ractive({
  el: 'wrapper',
  template: '<div on-click="open">OPEN<div on-click="close">CLOSE</div></div>'
});

template.on({
  open: function(e) {
    alert('opening');
  },
  close: function(e) {
    alert('closing');
    e.original.stopPropagation();
  }
});
div > div {
  display: inline-block;
  padding: 10px;
  background: rgba(0, 0, 0, .3);
  padding: 10px 10px 10px 50px;
  cursor: pointer
}
<script src="https://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="wrapper"></div>

person Rich Harris    schedule 01.01.2015
comment
Вы также можете return false; из обработчика, и Ractive вызовет .stopPropagation() (и .preventFefault()) для вас. - person martypdx; 01.01.2015