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----初学习(一)

    刚开始学习GitHub,在这借鉴一下别人的总结,http://youngxhui.github.io/2016/05/03/GitHub-for-Windows%E4%BD%BF%E7%94%A8%E ...

  2. String例子

    #include <string.h> class String{ public: String(const String& str); String(const char* st ...

  3. django进阶-小实例

    前言: 这篇博客对上篇博客django进阶作下补充. 一.效果图 前端界面较简单(丑),有两个功能: 从数据库中取出书名 eg: 新书A 在form表单输入书名,选择出版社,选择作者(多选),输入完毕 ...

  4. css方法 - 移动端reset汇总与注释

    1.解决移动端触摸a元素,会有蓝色阴影 正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit- ...

  5. 删除RHSA文件方法

    DEL /F /A /Q \\?\%1RD /S /Q \\?\%1新建一个批处理文件,包含上面两行代码,然后将要删除的文件拖放进里面就OK!

  6. SharpGL学习笔记(十) 常见的光源类型，创建光源

    在OpenGL中,使用光源的特性组合,如颜色,位置,方向等等,可以创建多种不同类型的灯光. 常见的几种灯光类型有: 定向光源(directonal) 定位光源(positional) 衰减光源 聚光灯 ...

  7. Oracle 12C 创建用户连接pdb

    测试环境: C:\ora12c\product\12.1.0\dbhome_1\BIN>sqlplus.exe /nolog SQL*Plus: Release 12.1.0.1.0 Produ ...

  8. jquery validator

    jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目中早已用过,但看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必备 官方网站: ...

  9. 【转】javascript和html中unicode编码和字符转义的详解

    不是十分理解unicode和html转义的情况下,可能会误用,所以下面会对它们再做比较容易理解的解释: 1.html中的转义:在html中如果遇到转义字符(如“ ”),不管你的页面字符编码是utf-8 ...

  10. AES加密工具类（对称加密算法）

    import java.nio.charset.Charset; import java.security.Key; import javax.crypto.Cipher;import javax.c ...