js-DOM事件(stopPropagation&preventDefault)

• 事件的默认行为

事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为，例如点击 a 标签会跳转，点击 type=”text” 的 input 可以输入等等，这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件，但依然可以实现点击跳转等这些行为，而这些就是事件的默认行为。

• stopPropagation

取消冒泡：执行完当前元素的事件处理函数后，阻止冒泡向上执行

• preventDefault

取消默认行为：阻止后续默认行为，在函数内放前放后，对当前函数无影响

css部分：



html部分：


    看这里

这是未加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