事件對象
<!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="按鈕" @click="show($event)">
</div>
</body>
</html>事件冒泡
<!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);
//原生的寫法
//ev.cancelBubble = true;
},
show2:function(){
alert(222);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" name="" value="按鈕" @click.stop="show()">
</div>
</div>
</body>
</html>阻止事件默認行爲
<!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="按鈕" @contextmenu.prevent="show()">
</div>
</div>
</body>
</html>