阻止默认行为，阻止事件传播及执行一次

1.阻止默认行为（e.preventDefault() @click.prevent="）

概念举例：    点击超链接后会跳转到href对应的地址，这是html元素本身所具有的的行为。

：点击后会触发click事件，也会触发默认行为href.如何阻止其默认跳转行为？

1）我们先来了解一下

      1.

       2.

      3.

      这三个的区别。

    

当我们点击第一个的时候我们可以发现页面会刷新，资源会被重新加载，如果是京东这样的大型网站页面被刷新代价是巨大的。

当点击第二个的时候，页面没有被刷新，但是我们可以发现在页面后加了#，相当于是跳转到新的页面。注：href=‘#’，#可以有多个          

点击第三个时页面既不会被刷新也不会发生跳转。

2）接下来我们再来看一下，href="#"和href="javascript:;"的区别

  href属性用于指定超链接目标的URL，href属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JS代码段。href="javascript:;"，表示这是一个空链接，其中javascript:是伪协议，让我们通过一个链接来调用JS函数，采用javascript:方式可以实现a标签的点击事件运行（页面内容很多时）时，页面不会乱跳，用户体验更好（阻止了a的默认事件）。#和javascript:;作用类似，但是#在页面很长的情况下会回滚到页面顶部，而javascript:;则不会，它还是在当前位置。注：href="javascript:;"和href="javascript:void(0);"是一样的写法。

3）有了上面的基础，我们来了解如何阻止默认行为

（a）首先来看一下原生JS是如何实现的，原生JS是通过调用事件对象阻止方法来实现的

当然除了调用事件对象阻止方法还可以通过以下方法实现

e.preventDefault()在IE6,7,8中存在不兼容问题，所以在IE中我们需要window.event.returnValue = false;来处理，return fasle 不存在兼容性问题。(除了a的默认跳转行为，其实表单的提交行为很多时候也要进行阻止，还有鼠标右击菜单等，这个以后再讨论)

（b）我们接着来看一下vue是如何实现阻止默认事件的

我们发现vue是通过指令修饰符prevent来阻止默认事件发生，比原生JS要简单很多

（c）再来看一下jquery是如何实现的

jquery的实现与原生JS一样还可以 return false

（d）最后来看一下angular是如何实现的

同JS   e.preventDefault()

2.阻止事件传播（冒泡）

div1   < div2  < div

事件传播：2种，IE和firefox（IE是由内到外，ff由外到内），ECMAScript将这两种兼容先从外到内进行捕获，再从内到外进行冒泡。

我们只需要了解冒泡即可：我们给div1和div2绑定了事件，当我们点击div1时它的事件处理完后会向上传播，传给div2也会处理，最终传到html

JS实现如下：stopPagation()方法

vue实现如下：  指令修饰符.stop

总结：

默认事件行为：href=""链接，submit表单提交等

阻止默认行为方法：