添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
酒量小的企鹅  ·  vue之Error: Unknown ...·  10 月前    · 
想旅行的鸵鸟  ·  React + antd ...·  1 年前    · 

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语句来阻止默认行为。 希望能对您有所帮助。