事件覆盖 RactiveJS
Event overriding 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>
您可以通过调用 stopPropagation
方法来停止 DOM 事件冒泡。传递给 Ractive 事件处理程序的 event
参数将原始的 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>
我发现自己有点麻烦,因为在元素上触发事件也会触发绑定到其父元素的事件,如下所示。
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>
您可以通过调用 stopPropagation
方法来停止 DOM 事件冒泡。传递给 Ractive 事件处理程序的 event
参数将原始的 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>