preventDefault阻止默认行为和stopPropagation终止传递
event.preventDefault()
链接本来点了可以跳转, 如果注册preventDefault事件,则点了不能跳转
<body>
<a href="http://w3cschool.cc/">Go to W3Cschool.cc</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function () {
$("a").click(function (event) {
event.preventDefault();
});
});
</script>
</body>
event.stopPropagation()
html元素嵌套, 父元素的事件会传播给子元素. 如果子元素不想要父元素的事件,则可以注册stopPropagation事件.
<div style="height:100px;500px;padding:10px;border:1px solid blue;background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span>
</p></div>
<p><b>Note:</b> Click on each of the elements above. When clicking on the <b>div</b> element, it will alert that the div
element was clicked. When clicking on the <b>p</b> element, it will return both the p and the div element, since the
p element is inside the div element.
But when clicking on the <b>span</b> element, it will only return itself, and not the p and the div element (even
though its inside these elements). The event.stopPropagation() stops the click event from bubbling to the parent
elements.
</p>
<p><b>Tip:</b> Try to remove the event.stopPropagation() line, and click on the span element again (the click event will
now bubble up to parent elements).</p>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("span").click(function (event) {
event.stopPropagation();
alert("The span element was clicked.");
});
$("p").click(function (event) {
alert("The p element was clicked.");
});
$("div").click(function () {
alert("The div element was clicked.");
});
});
</script>
vue事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<div id="app">
<h1>事件: 集成</h1>
<button @click="counter+=1">add1</button>
{{counter}}
<h1>事件: methods</h1>
<button @click="greet">greet</button>
<button @click="greet2($event)">greet2-event</button>
<a href="https://www.baidu.com/" @click="greet3($event)">greet3-event.preventDefault</a>
<a href="https://www.baidu.com/" @click.prevent="greet3">greet4-@click.prevent</a>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
counter: 0,
},
methods: {
//最简单的事件注册
greet() {
alert("greet maomao!")
},
// 查看事件
greet2(event) {
alert(event);
},
//使用原生js阻止默认行为,需传递事件进来
greet3(event) {
event.preventDefault();
alert('preventDefault');
},
//使用vue修饰符阻止默认行为
greet4() {
alert('@click.prevent');
}
}
})
</script>
</body>
</html>
- vue提供的事件修饰符有:
.stop
.prevent
.capture
.self
.once
@click.keyup.13
@click.enter.a
注意区分v-model的修饰符
v-model.lazy
v-model.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
v-model.trim