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自带事件修饰符)的更多相关文章

  1. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  2. 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对象) ...

  3. jQuery事件绑定汇总（包括一些无法获取事件的问题）

    ★ $(document).on('click', 'button[name=closeLayerOut2]', function () { ...... }); $(document).on('cl ...

  4. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  5. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  6. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  7. jQuery-1.9.1源码分析系列（十） 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  8. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

  9. 事件绑定之.bind()

    .bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...

随机推荐

  1. GitHub上整理的一些工具【转载】

    技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...

  2. sonarqube插件开发(三) 调试插件

    环境 windows + eclipse +sonarqube server 5.6.4 准备 新建一个maven项目,其中加入了一些插件所用的jar <project xmlns=" ...

  3. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  4. 应用程序创建自己的奔溃转储（crash dump）文件

    1.注册自定义的UnhandledExceptionFilter,C/C++ Runtime Library下需要注意自定义handler被移除(hook kernel32.dll的SetUnhand ...

  5. 使用JSP的fmt标签实现国际化支持

    使用JSP的fmt标签配置i18n国际化资源文件可以实现根据不同的地区和语言切换不同的显示. 具体做法如下: 1.在JSP页面中添加fmt标签的引用: <%@ taglib prefix=&qu ...

  6. 如何使用HttpClient来发送带客户端证书的请求，以及如何忽略掉对服务器端证书的校验

    最近要做客户端和服务器端的双向认证,在客户端向服务器端发送带证书的请求这里有一点问题,网上的例子大多都不太好使,于是找了github上httpclient源代码中的例子改造了一下,终于弄明白了 git ...

  7. 【BZOJ1210】[HNOI2004]邮递员 插头DP+高精度

    [BZOJ1210][HNOI2004]邮递员 Description Smith在P市的邮政局工作,他每天的工作是从邮局出发,到自己所管辖的所有邮筒取信件,然后带回邮局.他所管辖的邮筒非常巧地排成了 ...

  8. iOS开发 纯代码创建UICollectionView

    转:http://jingyan.baidu.com/article/eb9f7b6d8a81a5869364e8a6.html iOS开发 纯代码创建UICollectionView 习惯了使用xi ...

  9. iOS - UIScreen的 bound、frame、scale属性

    A UIScreen object contains the bounding rectangle of the device’s entire screen. When setting up you ...

  10. 《机器学习实战》2.2.2分析数据：使用matplotlib创建散点图

    #输出散点图 def f(): datingDataMat,datingLabels = file2matrix("datingTestSet3.txt") fig = plt.f ...