event.preventDefault()
MDN解释:
Event
接口的 preventDefault()
方法,告诉user agent:如果此事件没有被显式处理,它默认的动作也不应该照常执行。此事件还是继续传播,除非碰到事件侦听器调用stopPropagation()
或stopImmediatePropagation()
,才停止传播。
个人理解:
事件后续动作别执行了,如submit触发函数加这么一句,就是别提交表单了,input的keydown事件触发函数加这么一句,就是别输入到文本框里面了。
<body>
<input type="text" onkeydown="test(event)"/>
<a href="http://www.baidu.com" onclick="test(event)">to baidu</a>
</body>
<script type="text/javascript">
function test(e) {
console.log("默认的动作不照常执行");
e.preventDefault();
}
</script>
在文本框输入,或点击超链接
stopPropagation、stopImmediatePropagation
因为有事件的冒泡和捕获,所以会有需要阻止的情况出现吧。(真是废话来的 - _ -,总之得先弄白冒泡和捕获吧。https://blog.csdn.net/qq_28842789/article/details/105975205)
event.stopPropagation()
MDN解释:
阻止捕获和冒泡阶段中当前事件的进一步传播。
<body onload="load();">
<div id="d1" style="width: 400px; height: 400px; border: solid 1px;">
<div id="d2" style="width: 200px; height: 200px; border: solid 1px;">
<div id="d3" style="width: 100px; height: 100px; border: solid 1px;">one</div>
</div>
</div>
</body>
栗子1(冒泡阶段的阻断)
<script type="text/javascript">
function load() {
div1 = document.getElementById("d1");
div2 = document.getElementById("d2");
div3 = document.getElementById("d3");
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于捕获阶段");
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段");
}, true);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于捕获阶段");
}, true);
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于冒泡阶段");
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段");
e.stopPropagation();
}, false);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于冒泡阶段");
}, false);
}
</script>
点击 d3 div 结果:捕获全部执行完,冒泡到div2时,最后一个div1的冒泡被阻止
栗子2(捕获阶段的阻断)
<script type="text/javascript">
function load() {
div1 = document.getElementById("d1");
div2 = document.getElementById("d2");
div3 = document.getElementById("d3");
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于捕获阶段");
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段");
e.stopPropagation();
}, true);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于捕获阶段");
}, true);
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于冒泡阶段");
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段");
}, false);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于冒泡阶段");
}, false);
}
</script>
点击 d3 div 结果:执行到div2的捕获函数时,直接阻断了后面所有没执行的捕获和冒泡函数
event.stopImmediatePropagation()
MDN解释:
阻止事件冒泡并且阻止相同事件的其他侦听器被调用。(可能翻译不靠谱,其实在捕获阶段调用且后面的元素还有捕获函数,也不会执行了,个人理解:stopImmediatePropagation=stopPropagation+阻断目标元素其他未执行的同一事件监听函数)
<body onload="load();">
<div id="d1" style="width: 400px; height: 400px; border: solid 1px;">
<div id="d2" style="width: 200px; height: 200px; border: solid 1px;">
<div id="d3" style="width: 100px; height: 100px; border: solid 1px;">one</div>
</div>
</div>
</body>
栗子1(冒泡阶段的阻断)
<script type="text/javascript">
function load() {
div1 = document.getElementById("d1");
div2 = document.getElementById("d2");
div3 = document.getElementById("d3");
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于捕获阶段");
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段");
}, true);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于捕获阶段");
}, true);
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于冒泡阶段");
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段, 第1个监听函数");
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段, 第2个监听函数");
e.stopImmediatePropagation();
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段, 第3个监听函数");
}, false);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于冒泡阶段");
}, false);
}
</script>
点击 d3 div 结果:
栗子2(捕获阶段的阻断)
<script type="text/javascript">
function load() {
div1 = document.getElementById("d1");
div2 = document.getElementById("d2");
div3 = document.getElementById("d3");
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于捕获阶段");
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段, 第1个监听函数");
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段, 第2个监听函数");
e.stopImmediatePropagation();
}, true);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于捕获阶段, 第3个监听函数");
}, true);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于捕获阶段");
}, true);
div1.addEventListener("click", (e) => {
console.log("div1被点击,监听触发于冒泡阶段");
}, false);
div2.addEventListener("click", (e) => {
console.log("div2被点击,监听触发于冒泡阶段");
}, false);
div3.addEventListener("click", (e) => {
console.log("div3被点击,监听触发于冒泡阶段");
}, false);
}
</script>
点击 d3 div 结果:一元素对同一事件的多个监听函数,按代码顺序执行,执行到div2的第二个监听函数,阻止了后面的函数执行。