- 事件的默认行为
事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为，例如点击 a 标签会跳转，点击 type=”text” 的 input 可以输入等等，这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件，但依然可以实现点击跳转等这些行为，而这些就是事件的默认行为。
- stopPropagation
取消冒泡：执行完当前元素的事件处理函数后，阻止冒泡向上执行
- preventDefault
取消默认行为：阻止后续默认行为，在函数内放前放后，对当前函数无影响
css部分：
<style>
a{
display: inline-block;
width: 200px;
height: 100px;
background-color: #953b39;
}
span{
display: inline-block;
background-color: #abbbbb;
margin: 35px 70px;
width: 60px;
height: 30px;
font-size: 20px;
}
</style>
html部分：
<body>
<a href="http://blog.csdn.net"><span>看这里</span></a>
</body>
这是未加js的时候，效果图为：
这里写图片描述
现在给这个a元素和span元素分别添加点击事件：
var a = document.getElementsByTagName("a")[0];
var span = document.getElementsByTagName("span")[0];
a.onclick = function (e) {
alert("click a");
};
span.onclick = function (e) {
alert("click span");
}
此时点击span效果依次为：
“click span”->“click a”->跳转页面到http://blog.csdn.net
1、如果我们想要点击span，不触发a的点击事件，也就是想要的最终效果依次为：
“click span”->跳转页面到http://blog.csdn.net
那么，我们可以在span的点击事件中加上e.stopPropagation()，阻止点击事件冒泡到a上，代码如下：
span.onclick = function (e) {
e.stopPropagation();
alert("click span");
}
通俗点说，如果想要点击span不触发它父元素（所有父元素）上面的点击事件，可以加上e.stopPropagation()。
2、如果我们想要点击span，不让页面跳转，也就是想要的最终效果依次为：
“click span”->“click a”
那么，我们可以在span的点击事件中加上preventDefault，代码为：
span.onclick = function (e) {
e.preventDefault();
alert("click span");
}
也就是阻止了事件的默认行为。
3、如果想要点击span，只触发span的点击事件，也就是想要的最终效果为：
“click span”
那么，就可以把stopPropagation和preventDefault都加上，代码为：
span.onclick = function (e) {
e.stopPropagation();
e.preventDefault();
alert("click span");
}
参考文章：https://blog.csdn.net/mm19931027/article/details/76121855
网友评论