Explanation of vue Event Object Bubble Prevent Default Behavior
- 2021-08-05 08:29:41
- OfStack
Organize the document, search out an vue event object, bubble, prevent the code of default behavior, and slightly organize and streamline 1 to share it.
Event object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(ev){
alert(ev.clientX);
alert(ev.clientY);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" name="" value=" Button " @click="show($event)">
</div>
</body>
</html>
Event bubbling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(111);
// Native writing
//ev.cancelBubble = true;
},
show2:function(){
alert(222);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" name="" value=" Button " @click.stop="show()">
</div>
</div>
</body>
</html>
Block event default behavior
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.show2{
padding:15px;;
}
</style>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {},
methods: {
show: function () {
alert(111)
},
show2: function () {
alert(222)
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div class="show2">
<input type="button" name="" value=" Button " @contextmenu.prevent="show()">
</div>
</div>
</body>
</html>
Hopefully this article is helpful to you, vue event object, bubbling, prevent default behavior content for you to introduce here. I hope everyone will continue to pay attention to our website! If you want to learn vue, you can continue to pay attention to this site.