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. 浏览器解析html全过程详解

    前端文摘:深入解析浏览器的幕后工作原理 关于浏览器解析html全过程详解 输入URL到浏览器接收返回的数据的整个过程 TCP报文格式详解 IP报文格式详解 Linux IO模式及 select.pol ...

  2. thinkphp3.2 实现二级导航和高亮显示

    一.控制器代码如下: public function index(){ //高亮显示 $action = CONTROLLER_NAME."/".ACTION_NAME; $thi ...

  3. Esper学习之十五：Pattern（二）

    上一篇开始了新一轮语法——Pattern的讲解,一开始为大家普及了几个基础知识,其中有说到操作符.当时只是把它们都列举出来了,所以今天这篇就是专门详解这些操作符的,但是由于篇幅限制,本篇先会讲几个,剩 ...

  4. EXPLAIN 具体含义 ( type possible_key key key_len ref )

  5. laravel 查看sql

    方法一: 我们有时候想测试一段代码生产的 SQL 语句,比如: 我们想看 App\User::all(); 产生的 SQL 语句,我们简单在 routes.php 做个实验即可: //app/Http ...

  6. 关于hp proliant sl210t服务器raid 1阵列配置

    hp proliant sl210t服务器,一般都会带有两个阵列卡 一个服务器自带的Dynamic Smart Array B120i RAID控制器,一个为Slot卡槽上的Smart Array P ...

  7. java的前缀自增自减和后缀自增自减

    2.前缀自增自减法(++a,--a): 先进行自增或者自减运算,再进行表达式运算. 3.后缀自增自减法(a++,a--): 先进行表达式运算,再进行自增或者自减运算 实例: 实例 public cla ...

  8. WCF之通信工厂的简单使用

    WCF服务端已经创建好了以后,客户端可以直接通过选择服务引用,直接生成客户端的代理类,进而调用服务端的服务.其实说到底,服务端和客户端的通行就是通过终结点,然后在服务器端和客户端建立通信通道完成数据的 ...

  9. vue报错/ style-loader: Adds some css to the DOM by adding a <style> tag

    1.1.1.   vue-cli搭建的项目引入.styl/css文件报错 http://blog.csdn.net/z852064121/article/details/72660327 / styl ...

  10. ZH奶酪：JavaScript调用AngularJS的函数/$scope/变量

    使用背景: 需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过co ...