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. input回车问题

    今天有一个问题,就是input对象没有加任何事件自己回车导致跳到了404页面.处理的时候,并发现没找到回车事件的控制. 那么只有一种情况,就是自带的回车控制. 百度了一下,如下面博文里面的写法.我这边 ...

  2. 推荐系统之隐语义模型(LFM)

    LFM(latent factor model)隐语义模型,这也是在推荐系统中应用相当普遍的一种模型.那这种模型跟ItemCF或UserCF的不同在于: 对于UserCF,我们可以先计算和目标用户兴趣 ...

  3. 【SpringCloud微服务实战学习系列】配置详解

    前言 Spring Boot针对常用的开发场景提供了一系列自动化配置来减少原本复杂而又几乎很少改动的模板化配置内容. 一.配置文件 Spring Boot的默认配置文件位置为src/main.reso ...

  4. jquery 元素选择器集合

    一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...

  5. Linux 下Redis集群安装部署及使用详解(在线和离线两种安装+相关错误解决方案)

    一.应用场景介绍 本文主要是介绍Redis集群在Linux环境下的安装讲解,其中主要包括在联网的Linux环境和脱机的Linux环境下是如何安装的.因为大多数时候,公司的生产环境是在内网环境下,无外网 ...

  6. sencha touch 在线实战培训 第一期 第五节

    2014.1.6晚上8点准时开的课 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:             实现皮肤自定义样式的修改 css相关理论: 重写官方样式,美化ap ...

  7. Egret动态设置按钮的图片

    参考: 动态设置Button按钮的状态图片 按钮有3个状态,up down disabled.这里区别于source,source.down,source.disabled,而是每个状态单独一个ima ...

  8. iOS - WKWebView那些坑

    WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView 拥有60fps滚动刷新率. ...

  9. MUI---上传头像功能实现

    这里使用MUI上传头像的功能是结合VUE来做的,所以: changeFace:function(){ var IMAGE_UNSPECIFIED = "image/*"; //相册 ...

  10. 肖俊：HPE IT 的DevOps 实践分享

    本篇文章来自于HPE和msup共同举办的技术开放日HPE测试技术总监肖俊的分享,由壹佰案例整理编辑. 一.DevOps含义解析 这是DevOps的趋势图.DevOps这个概念大概是在2009年被提出来 ...