Program:
index.html:
index.js:
Output:
index.html:
<!DOCTYPE html>
<html>
<body>
<div id="ad">
<a @click.stop="doStop" href="https://codingatharva.blogspot.com" target="_blank"> Stop </a>
<br>
<br>
<button v-on:click.once="doOnce"> Once </button>
<br>
<br>
<a href="https://codingatharva.blogspot.com" v-on:click.self.prevent target="_blank">Coding Atharva
<p>Click me now</p>
</a>
<br>
<br>
<a v-on:click.prevent="doPrevent" href="https://codingatharva.blogspot.com" target="_blank"> Prevent</a>
<br>
<br>
<!-- using capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is always handled here before being handled by that element -->
<span v-on:click.capture="doThis"> Capture </span>
<br>
<br>
<!-- the scroll event's default behavior will happen -->
<!-- immediately, instead of waiting for `onScroll` to be completed -->
<!-- whenever it contains `event.preventDefault()` -->
<span v-on:scroll.passive="onScroll">Passive</span>
</div>
<div style="margin-top:500px;"></div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="./index.js"> </script>
</body>
</html>
index.js:
var app = new Vue({
el: '#ad',
methods: {
doStop: function () {
alert("You are About to Redirect")
},
doThis: function () {
alert("hello")
},
doPrevent: function () {
alert("Click Prevented")
},
doOnce: function () {
alert("Once")
},
}
});
Output:
