[vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
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
[vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)的更多相关文章
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- jQuery事件绑定汇总（包括一些无法获取事件的问题）
★ $(document).on('click', 'button[name=closeLayerOut2]', function () { ...... }); $(document).on('cl ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- 兼容IE9以下和非IE浏览器的原生js事件绑定函数
事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery-1.9.1源码分析系列（十） 事件系统——事件绑定
事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...
- javascript之事件绑定
曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...
- 事件绑定之.bind()
.bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...
随机推荐
- 告知你不为人知的UDP-连接性和负载均衡
版权声明:本文由黄日成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/812444001486438028 来源:腾云阁 h ...
- 通过orderby关键字，LINQ可以实现升序和降序排序。LINQ还支持次要排序。
通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...
- Android进程和线程(Android开发指南--译)
(转自:http://www.cnblogs.com/xitang/archive/2011/09/24/2189460.html) Processes and Threads 译者署名: 呆呆大虾 ...
- C99中的变长数组（VLA）
处理二维数组的函数有一处可能不太容易理解,数组的行可以在函数调用的时候传递,但是数组的列却只能被预置在函数内部.例如下面这样的定义: #define COLS 4 int sum3d(int ar[] ...
- 微信小游戏 修改appid
微信开发者工具中,当你使用一个公众号开发一个项目,有需求切换到另外一个公众号继续开发时,需要修改appid. 修改微信小游戏 project.config.json 文件的appid
- 【CF720D】Slalom 扫描线+线段树
[CF720D]Slalom 题意:一个n*m的网格,其中有k个矩形障碍,保证这些障碍不重叠.问你从(1,1)走到(n,m),每步只能往右或往上走,不经过任何障碍的方案数.两种方案被视为不同,当且仅当 ...
- React 生命周期介绍
[组件生命周期] 一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属 ...
- 9.17 Django ORM分组
2018-9-17 19:53:22 预习:http://www.cnblogs.com/liwenzhou/p/8343243.html 新买个蓝牙挂耳耳机,感觉不错! 放上代码 笔记什么的明天继 ...
- scala - fold，aggregate，iterator
import org.json4s._ import org.json4s.jackson._ import org.json4s.jackson.JsonMethods._ import org.j ...
- Oracle体系结构之rac内存管理
一.内存管理第一层: 1.memory_target和memory_max_target开启自动内存管理. rac1: SQL> show parameter memory NAME TYPE ...