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. Android四大组件之BrocastReceive

  2. 跟bWAPP学WEB安全(PHP代码)--SSL(Server-Side-Include)漏洞

    什么是Server-Side-Include漏洞 服务端包含漏洞是指发送指令到服务器,服务器会将指令运行完,把运行结果包含在返回文件中发送给你.利用这种漏洞可以获取服务端的信息甚至执行命令,这样的指令 ...

  3. VUE单独页面body css设置

    使用created周期用JS来处理BODY的样式 export default { beforeCreate: function () { document.getElementsByTagName( ...

  4. vscode 使用sublime风格代码

    Monokai 主题 One Dark Pro主题   vscode设置字体 "editor.fontFamily": "MONACO, Consolas, 'Couri ...

  5. SOA架构商城一

    SOA架构: SOA是Service-Oriented Architecture的首字母简称,它是一种支持面向服务的架构样式.从服务.基于服务开发和服务的结果来看,面向服务是一种思考方式.其实SOA架 ...

  6. Solve Error: 'has incomplete type', foward declaration of 'class x'

    在C++的OOB编程中,有时候我们会遇到这样的错误Error: 'has incomplete type',forward declaration of 'class x',那么是什么原因引起的这个问 ...

  7. vue报错 Module not found: Error: Cannot resolve 'file' or 'directory'

    炸了,我好写sell而组件,直接就用了,我的天哪 看你的写了吗,就用: Module not found: Error: Cannot resolve 'file' or 'directory' 页另 ...

  8. opengl学习笔记（二）:使用OpenCV来创建OpenGL窗口

    通常的增强现实应用需要支持OpenGL的OpenCV来对真实场景进行渲染.从2.4.2版本开始,OpenCV在可视化窗口中支持OpenGL.这意味着在OpenCV中可轻松渲染任何3D内容. 若要在Op ...

  9. 使用IntelliJ IDEA进行Python远程调试的需求（未完）

    使用IntelliJ IDEA进行Python远程调试的需求(未完) 在研究深度学习Machlearning时,有时候需要借助ubuntu搭建的tensorflow环境,另外也有越来越多的运算程序只能 ...

  10. 11.20 HTML及CSS

    <div>用于分组HTML元素的块级元素HTML表单,用于收集不同类型的用户输入<input type='radio'>:定义了表单的单选框按钮<input type=' ...