Question

我发现自己有点麻烦，因为触发元素上的事件也会触发绑定到其父元素的事件，如下所示。

＆＃13;

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');
  }
});

＆＃13;

div > div {
  display: inline-block;
  padding: 10px;
  background: rgba(0, 0, 0, .3);
  padding: 10px 10px 10px 50px;
  cursor: pointer
}

＆＃13;

<script src="https://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="wrapper"></div>

＆＃13;

Answer 1

您可以通过调用其stopPropagation方法来停止DOM事件冒泡。传递给Ractive事件处理程序的event参数将原始DOM事件存储为event.original - 因此您可以这样做：

＆＃13;

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();
  }
});

＆＃13;

div > div {
  display: inline-block;
  padding: 10px;
  background: rgba(0, 0, 0, .3);
  padding: 10px 10px 10px 50px;
  cursor: pointer
}

＆＃13;

<script src="https://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="wrapper"></div>

＆＃13;

事件重写RactiveJS

1 个答案: