javascript - 为什么阻止了div的默认行为,里面的a标签就不跳转网站了?
高洛峰
高洛峰 2017-04-11 11:02:19
[JavaScript讨论组]

我阻止了p的默认行为,里面的a就不跳转了。

代码:

跳转百度

问题:
a标签不跳转了,但是p本身没有任何默认行为啊,阻止p的默认行为,为何会阻止a的跳转。

猜想一:

a标签的页面跳转行为是由window来执行的,在事件传播的过程中,中止掉了这个传递过程。

猜想二:

但是用stoppropagation(),并不能阻止,说明事件传播和行为传播是两个线程?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(6)
大家讲道理

1.
其实是点击a,冒泡到p,触发p的onclick,执行了当前事件的阻止默认行为,就不跳转了。
2.
给a的点击事件加了stoppropagation()是能够正常跳转的。因为看不到代码不知道是我理解错误你的意思还是你加错了位置。
3.
事件的默认行为是在事件的所有你写的代码执行完毕才会被执行。

大家讲道理

其实在 p 上加 click 事件,和直接在 a 标签上加事件,event 是同一个,这就好理解了。

var p = document.getElementsByTagName("p")[0];
p.onclick = function(event){
    e1 = event;
    event.preventDefault();
};

var a = document.getElementsByTagName("a")[0];
a.onclick = function(event){
    e2 = event;
    event.preventDefault();
};

// 页面打开后快速点击
setTimeout(() => alert(e1 === e2), 4000)  // true
黄舟

event.preventDefault()是阻止某个事件的默认行为,与哪个元素无关,所以即使你是给p绑定click事件,也是会阻止a标签的click事件的默认行为,个人观点

黄舟

在 a 标签的 onclick 事件中调用 stopPropagation() 则 不管 p 的 onclick 事件中是否调用了 preventDefault() 都无法阻止 a 标签的默认行为.
所以我推测,事件的默认行为是否被阻止是在事件传播结束后结算的,即在事件传播结束后回调默认行为函数

PHP中文网

就是事件冒泡而已。单击 a 产生 click 事件 event.target === a 。事件冒泡,委托 p 进行处理

event.preventDefault()

既然阻止了默认事件 那就不跳转了。

高洛峰

这应该是时间捕获吧!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号