三剑客区别
1. preventDefault()
阻止默认的点击事件执行
1. 阻止选中复选框
下面的例子中,点击复选框时,因为调用了preventDefault函数,阻止了默认事件(复选框的默认事件是选中复选框),所以复选框不会被选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>preventDefault</title>
</head>
<body>
<form>
<label for="demo">Checkbox:</label>
<input type="checkbox" id="demo"/>
</form>
<div id="output-box"></div>
<script>
document.querySelector("#demo").addEventListener("click", function(event) {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
event.preventDefault();//阻止复选框默认选中
}, false);
</script>
</body>
</html>
效果图:
2. 在编辑域中阻止按键
下面的例子中,当输入的字符的ASC码小于97或者大于122时,文本输入框是不会显示输入的字符,而是弹出一个提示两秒时长的红色提示框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>preventDefault</title>
<style type="text/css">
.warning {
border: 2px solid #f39389;
border-radius: 2px;
padding: 10px;
position: absolute;
background-color: #fbd8d4;
color: #3b3c40;
}
</style>
</head>
<body>
<div class="container">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox">
</form>
</div>
<script>
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
displayWarning(
"Please use lowercase letters only."
+ "\n" + "charCode: " + charCode + "\n"
);
}
}
}
var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";
function displayWarning(msg) {
warningBox.innerHTML = msg;
if (document.body.contains(warningBox)) {
window.clearTimeout(warningTimeout);
} else {
// insert warningBox after myTextbox
myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
}
warningTimeout = window.setTimeout(function() {
warningBox.parentNode.removeChild(warningBox);
warningTimeout = -1;
}, 2000);
}
</script>
</body>
</html>
效果图:
2. stopImmediatePropagation
阻止监听同一事件的其他事件监听器被调用
下面的例子中,点击p元素后,弹出第一个和第二个提示框后,后面按照顺序添加进去的提示框就不会再弹出了,同时,事件不会向上冒泡,所以div上面的click事件函数也不会执行。
<!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
const p = document.querySelector('p')
p.addEventListener("click", (event) => {
alert("我是p元素上被绑定的第一个监听函数");
}, false);
p.addEventListener("click", (event) => {
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
// 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
p.addEventListener("click",(event) => {
alert("我是p元素上被绑定的第三个监听函数");
// 该监听函数排在上个函数后面,该函数不会被执行
}, false);
document.querySelector("div").addEventListener("click", (event) => {
alert("我是div元素,我是p元素的上层元素");
// p元素的click事件没有向上冒泡,该函数不会被执行
}, false);
</script>
</body>
</html>
效果图:
3. stopPropagation()
阻止当前事件捕获和冒泡
下面的例子中,点击表格的第一行时,会阻止事件冒泡,table上的监听click事件的函数不会执行;
点击表格的第二行时,table上的监听click事件的函数会执行;
<!DOCTYPE html>
<html>
<head>
<title>Event Propagation</title>
<style type="text/css">
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
</style>
<script type="text/javascript">
function stopEvent(ev) {
c2 = document.getElementById("c2");
c2.innerHTML = "hello";
// this ought to keep t-daddy from getting the click.
ev.stopPropagation();
alert("event propagation halted.");
}
function load() {
elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);
}
</script>
</head>
<body onload="load();">
<table id="t-daddy" onclick="alert('hi');">
<tr id="tbl1">
<td id="c1">one</td>
</tr>
<tr>
<td id="c2">two</td>
</tr>
</table>
</body>
</html>