preventDefault和$event用法和demo

最新推荐文章于 2023-01-10 15:38:18 发布
最新推荐文章于 2023-01-10 15:38:18 发布
阅读量210 收藏
点赞数
分类专栏： Vue路上的磕磕绊绊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40499698/article/details/110822950
版权

文章目录

前言

通过写preventDefault()的demo引出preventDefault的用法和$event的理解

一、preventDefault()停止默认动作介绍

例如：提交表单，希望验证不通过时，表单不提交。此时需要submit按钮不进行下一步动作，会有一个默认停止动作preventDefault

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        输入想打开的网址： </br>
        判断规则：         </br>
        1.必须以'http://'开头 </br>
        2.不能是空字符串   </br>

        <input v-model="url" placeholder="必须以'http://'开头,否则不会跳转"> </br>
        <a v-bind:href="this.url" v-on:click="validate($event)">点我确定</a>

    </div>
    <script>
        var app  = new Vue({
            el:"#app",
            data:{
                url:''
            },
            methods:{
                validate:function (event) {
                    if (this.url.length == 0 || this.url.indexOf("http://") !=0){

                        alert("输入不符合规则")
                        if (event){
                            event.preventDefault()
                        }

                    }
                }
            }
        })

    </script>

</body>
</html>

二、$event的理解

$event是指当前触发的是什么事件（鼠标事件，键盘事件等） $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

这个demo中，$event代表的是鼠标点击事件

参考：https://www.jianshu.com/p/3f2c664e43d8

总结

记录下学习轨迹~

疯狂鸡仔在xiao习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
网页右键ie不支持event.preventDefault和event.returnValue （需要加window） ，需要的朋友可以参考一下
preventDefault() 方法使用
Delion
12-29 7081
preventDefault() 方法 Event 对象 定义和用法 取消事件的默认动作。 语法 event.preventDefault() 说明 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注
关于event.preventDefault()的用法
fuyangsuccessful的博客
01-10 6313
event.preventDefault() ；ES6中的对象解构赋值。
前端页面中event.preventDefault()方法作用
Clarence_Pang的博客
12-10 1533
event.preventDefault()是通知浏览器不执行与事件关联的默认动作 举个栗子 $(obj).click(function(event){ event.preventDefault(); });
preventDefault()方法和stopPropagation()方法的使用
aa574202228的专栏
07-07 1140
1、preventDefault()方法        preventDefault()方法是用来阻止浏览器默认事件。                                                                                                                                
26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单...
weixin_30535167的博客
01-08 188
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> ...
jquery事件preventDefault()方法用法实例
10-24
主要介绍了jquery事件preventDefault()方法用法,实例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以参考下
flex中event.preventDefault()方法取消事件的默认行为
10-27
当点击datagrid的第一和第四项时，itemEdit事件将不起作用，许多事件都有默认执行的关联行为，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
return false;和e.preventDefault();的区别
09-05
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
阻止事件的默认行为event.preventDefault
Focus-Fe
03-03 437
     很多时候，我们需要阻止一些事件的默认行为，比如有的时候一些锚链接等等。   兼容性相关的可以参考：http://zhangyaochun.iteye.com/blog/1163331 event的知识参考：http://zhangyaochun.iteye.com/blog/1439502     /* *preventDefault -- stop th...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
weixin_33849942的博客
12-26 99
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;事件修饰符之使用$event与$prevent修饰符操作表单&lt;/title&gt; &lt;script src="vue.j
使用VueResource发起get请求，使用this.$route.query.id
weixin_40499698的博客
11-19 3139
文章目录一、使用VueResource发起get请求二、router-link配置三、router index.js配置 一、使用VueResource发起get请求 1.this.$route.query.id：在router-link中会配置query.id <template> <div> <div> <p>标题：{{ blog.title }} </p> <p&g
vue中 v-if，v-show使用和区别
weixin_40499698的博客
10-31 697
文章目录vue中 v-if，v-show使用和区别 vue中 v-if，v-show使用和区别 1.v-if 和 v-show使用 代码如下（html）： <div id="app"> <h3 v-if="isShow1">显示1</h3> <h3 v-if="isShow2">显示2</h3> <h3 v-show="show1">show1</h3> <h3 v-show="sho
webpack中使用vue-router
weixin_40499698的博客
11-18 387
文章目录一、webpack中使用vue-router二、示例1.新建路由2.创建vue页面3.在Index.vue中引入 一、webpack中使用vue-router 1.新建路由 2.新建vue页面 二、示例 1.新建路由 默认路由文件是src/router/index.js 1.先引入vue页面，@是当前文件路径，src 2.创建路由 import SayHi_test from '@/components/SayHi_test' export default new Router({ routes
v-model双向绑定和懒加载
weixin_40499698的博客
10-31 308
文章目录一、v-model 双向数据绑定1.双向数据绑定2.v-model.lazy 懒加载，鼠标失焦后，span标签可以获取到值3.v-model.trim 去掉输入的首尾空格总结 一、v-model 双向数据绑定 1.双向数据绑定 labe标签for功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 代码如下（示例）： <div class="box"> <label for="a">榴莲</label>
记一次安装cnpm时遇到的问题
weixin_40499698的博客
10-30 243
记一次安装cnpm时遇到的问题node.js 的版本问题 node.js 的版本问题 遇到坑，原来win10下的node.js版本是6+，换成最新的v14.14，npm是6.14.8 1.使用npm config 更换成淘宝镜像（具体命令网上很多） 2.npm config get registry，查看是否更换成功 3.安装切换镜像工具nrm：npm install nrm -g 4.nrm ls 来查看镜像列表，带*是当前 ...
初学vue（一）
weixin_40499698的博客
10-31 215
文章目录1.ol、ul列表（有序、无序）2.v-on:click、v-on:keyup.enter3.v-bind:href 缩写4.img使用总结 1.ol、ul列表（有序、无序） <ol> 标签定义有序列表 <ul> 标签定义无序列表 ul写得数组，ol写的对象，数组是序号，对象是key，value形式 代码如下（示例）： <div id="app"> <ul> <li v-for="(item,index) in me
watch监听器，和深度监听
weixin_40499698的博客
10-31 173
文章目录一、监听器watch1.watch简单使用2.数组使用深度监听总结 一、监听器watch 1.watch简单使用 watch中的msg 对应的是 data中的msg，newV是改变后的值，oldV是原始值，当改变后的值为true，触发弹框 代码如下（示例）： <div id="app"> <h3> {{msg}}</h3> <input type="text" v-model="msg"> </div> new Vue
element ui tree限制只能在同级上移下移的demo
最新发布
05-10
以下是一个基于 Element UI Tree 的限制只能在同级上移下移的示例代码： ```html <template> <el-tree :data="treeData" :default-expanded-keys="defaultExpandedKeys" :props="treeProps" @node-drop="handleNodeDrop" /> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1', }, { id: 3, label: 'Node 1-2', }, ], }, { id: 4, label: 'Node 2', children: [ { id: 5, label: 'Node 2-1', }, { id: 6, label: 'Node 2-2', }, ], }, ], defaultExpandedKeys: [1, 4], treeProps: { label: 'label', children: 'children', }, }; }, methods: { handleNodeDrop(event) { const { node, dropNode, dropType } = event; // 确保仅同级节点可以上移或下移 if (node.parent !== dropNode.parent) { event.preventDefault(); return; } // 处理上移 if (dropType === 'before') { const dropNodeIndex = node.parent.children.indexOf(dropNode); const nodeIndex = node.parent.children.indexOf(node); if (nodeIndex < dropNodeIndex) { this.moveNode(node, dropNodeIndex - 1); } else { this.moveNode(node, dropNodeIndex); } } // 处理下移 if (dropType === 'after') { const dropNodeIndex = node.parent.children.indexOf(dropNode); const nodeIndex = node.parent.children.indexOf(node); if (nodeIndex < dropNodeIndex) { this.moveNode(node, dropNodeIndex); } else { this.moveNode(node, dropNodeIndex + 1); } } }, moveNode(node, index) { node.parent.children.splice(node.parent.children.indexOf(node), 1); node.parent.children.splice(index, 0, node); }, }, }; </script> ``` 在上面的示例代码中，我们使用了 `@node-drop` 事件来监听拖拽事件，并在方法 `handleNodeDrop` 中对节点的拖拽行为进行限制。具体来说，我们在 `handleNodeDrop` 方法中添加了以下逻辑： 1. 确保仅同级节点可以上移或下移。 2. 处理上移：根据拖拽节点的位置和目标节点的位置，计算出要移动的节点的新位置，然后调用 `moveNode` 方法移动节点。 3. 处理下移：根据拖拽节点的位置和目标节点的位置，计算出要移动的节点的新位置，然后调用 `moveNode` 方法移动节点。 在 `moveNode` 方法中，我们使用 `splice` 方法来移动节点，并且使用 `indexOf` 方法来获取节点在其父节点的子节点列表中的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值