第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > 阻止默认行为 阻止事件传播及执行一次

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

时间:2023-11-18 23:52:25

相关推荐

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

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

概念举例:<ahref=""></a>点击超链接后会跳转到href对应的地址,这是html元素本身所具有的的行为。

<ahref=""click=''></a> :点击后会触发click事件,也会触发默认行为href.如何阻止其默认跳转行为?

1)我们先来了解一下

1.<ahref=""></a>

2.<ahref="#"></a>

3.<ahref="javascript:;"></a>

这三个的区别。

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

当点击第二个的时候,页面没有被刷新,但是我们可以发现在页面后加了#,相当于是跳转到新的页面。注: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 <body <html

事件传播:2种,IE和firefox(IE是由内到外,ff由外到内),ECMAScript将这两种兼容先从外到内进行捕获,再从内到外进行冒泡。

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

JS实现如下:stopPagation()方法

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

总结:

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

阻止默认行为方法:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。