Vuejs event modifiers - vue.js

Question

This is from the docs:
#click.prevent.self will prevent all clicks while #click.self.prevent will only prevent clicks on the element itself.
I tried making a fiddle to actually prevent all clicks but am unsuccessful. Can someone elaborate what this line in the docs actually mean?
Fiddle:
var app = new Vue({
el: '#appp',
methods: {
logger(arg) {
console.log(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp">
<div #click.prevent.self="logger('1')"> 1
<br>
<div #click.prevent.self="logger('2')"> ..2
<br>
<div #click.prevent.self="logger('3')"> ....3
</div>
</div>
</div>
</div>

Answer 1

One of the best ways to see how .prevent and .self interact is looking at the output of the Vue compiler:
.prevent.self:
on: {
"click": function($event){
$event.preventDefault();
if($event.target !== $event.currentTarget)
return null;
logger($event)
}
}
.self.prevent
on: {
"click": function($event){
if($event.target !== $event.currentTarget)
return null;
$event.preventDefault();
logger($event)
}
}
The key difference between those 2 code blocks is inside the fact that the order of the operations matters, a .prevent.self will prevent events coming from its children, but doesn't run any code, but a .self.prevent will only cancel events directly created by itself, and ignores child requests completely.
Demo:
var app = new Vue({
el: '#appp',
data: {log:[]},
methods: {
logger(arg) {
this.log.push(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
<form #submit.prevent="logger('form')" style="width: 50%;">
<button>
<p #click.prevent.self="logger('prevent.self')">
prevent.self
<span>(child)</span>
</p>
<p #click.self.prevent="logger('self.prevent')">
self.prevent
<span>(child)</span>
</p>
<p #click.prevent="logger('prevent')">
prevent
<span>(child)</span>
</p>
<p #click.self="logger('self')">
self
<span>(child)</span>
</p>
<p #click="logger('none')">
none
<span>(child)</span>
</p>
</button>
</form>
<pre style="width: 50%;">{{log}}</pre>
</div>
</div>