VUE - 取消默认事件

1,在 methods 中

<template>

<div>

<form @submit="addTodo">

<input v-model="title" type="text" name="title">

<input type="submit" value="添加" class="btn">

</form>

</div>

</template>

<script>

export default {

name:‘AddTodos‘,

data() {

return {

title:‘‘,

}

},

methods: {

addTodo(e){

e.preventDefault();//取消默认事件

// this.name 来获取form提交的name字段的数据

console.log(this.title);

}

},

}

</script>

2,@submit.prevent  

<template>

<div>

<form @submit.prevent="addTodo">

<input v-model="title" type="text" name="title" placeholder="请添加代办事项...">

<input type="submit" value="添加" class="btn">

</form>

</div>

</template>

<script>

export default {

name:‘AddTodos‘,

data() {

return {

title:‘‘,

}

},

methods: {

addTodo(e){

console.log(this.title);

}

},

}

</script>

原文地址:https://www.cnblogs.com/500m/p/11780494.html

时间: 2024-11-07 15:16:15

VUE - 取消默认事件的相关文章

取消默认事件及冒泡

阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { //如果提供了事件对象,则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { //否则,我们需要使用IE的方式来取消事件冒泡 window.event.canc

取消默认事件更牛逼的做法

event.returnValue的作用就是:当捕捉到事件(event)时,判断为false,则阻止当前事件继续运行,window.event.returnValue = false;之后的语句将都不会执行. return false 不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理.

取消图片的默认事件

//取消图片的默认行为 $(function(){ var $img = $("img"); var moving = function(event){ //something } var img = document.getElementsByTagName('img'); //IE下需要在document的mousemove里面取消默认事件;要用原生JS的事件不能用JQuery for (var i = 0; i < img.length; i++) { img[i].onm

关于form下提交和重置input按钮默认事件问题

今天用js清空input值的时候死活不行,搞了半天终于可以了..原因是因为默认事件.. HTML代码 <form> <input id="input" type="txt" value="查询"> <input id="submit" type="submit" value="提交"> <input id="reset" ty

阻止默认事件event.preventDefault();

阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入.  IE中,event是window对象的属性. event.preventDefault();方法用于取消默认事件,但是不兼容IE,在IE下,要用event.returnValue=false;来处理. document.oncontextmenu=function (ev) { var oEvent=ev||event; if (oEvent.pr

(二)咋使用VUE中的事件修饰符

1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添加.stop修饰符,如下: 我们发现再次点击按钮后,事件不再冒泡,控制台只打出 2.prevent取消默认事件 .prevent等同于JavaScript的event.preventDefault(),用于取消默认事件.比如我们页面的<a href="#">标签,当用户点击时,

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元

##阻止事件冒泡和取消默认操作

取消事件冒泡 事件冒泡指当一个元素的事件被触发的时候,比如鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发,这个过程被称为事件冒泡.这个事件是从原始元素开始一直冒泡到DOM树的最上层.事件传播的3个阶段:捕获.冒泡.目标阶段. 阻止事件冒泡:w3c的方法是event.stopPropagation(),IE则是使用event.cancelBubble = true; 兼容性写法: var event = event || window.event; if(event &&

vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐 默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐 键盘: @keydown $event ev.keyCode @