1.event.stopPropagation()方法
这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,
2.event.preventDefault()方法
这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
3.return false ;
这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
<script>
new Vue({
el: '#app',
methods: {
btn(event) {
//event.preventDefault()
event.stopPropagation(); //如果是连接还是会打开
console.log(event.type);
</script>
</html>
vue 中 event.stopPropagation() 和event.preventDefault() 使用 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,2.event.pre...
[
Vue
warn]: Error in v-on handler: “TypeError: $
event
.
stop
Pro
pagat
ion
is not a funct
ion
“
<form v-on:submit.pr
event
="onSubmit"></form>
vue
中
pr
event
修饰符相当于调用
event
.
preventDefault
():
event
.
preventDefault
() 方法阻止元素发生默认...
双向数据绑定
当数据发生变化的时候,视图也就发生变化
当视图发生 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 变化的时候,数据也会跟着同步变化
[](()v-on
事件修饰符处理了许多DOM事件的细节,帮助我们快速的完成一些事件动作。
例如v-on的修饰符有以下:
.
stop
- 调用
event
.
stop
Pro
pagat
ion
()。
.pr
event
- 调用
event
.
preventDefault
()。
.capture - 添加事件侦听器时
使用
capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根
在事件处理程序
中
调用
event
.
preventDefault
() 或
event
.
stop
Pro
pagat
ion
() 是非常常见的需求。尽管我们可以在方法
中
轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
以下是
Vue
提供的一些事件修饰符:
.
stop
:阻止事件冒泡,相当于
event
.
stop
Pro
pagat
ion
()
.pr
event
:取消预设行为,相当于
event
.
preventDefault
()
.capture:启用事件捕获(与冒泡相反,从外到内进行事
<div v-for="(item, index) in listData" @click="handleClick3">
<el-col :span="grid">
<div @click="handleClick1"></div>
</el-col>.
1. 确认事件绑定是否正确,包括绑定在正确的元素上以及绑定的事件类型是否正确。
2. 如果事件绑定正确,可以尝试在事件处理函数
中
使用
e.
stop
Pro
pagat
ion
()方法,阻止事件继续传播。
3. 如果以上方法都不起作用,可以尝试在事件处理函数
中
使用
return false语句来阻止默认行为。
希望能对您有所帮助。