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;width: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