JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案:
1、event.preventDefault —— 阻止默认
Event 接口的 preventDefault()
方法,告诉user agent:如果此事件没有被显式处理,它默认的动作也不应该照常执行。此事件还是继续传播,除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation(),才停止传播。
示例:
<!DOCTYPE html>
<html>
<head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style>
</head>
<body>
<form><label for="id-checkbox">Checkbox:</label><input type="checkbox" id="id-checkbox"/>
</form><div id="output-box"></div>
<script>document.querySelector("#id-checkbox").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>
<!DOCTYPE html>
<html>
<head><style>.warning {border: 2px solid #f39389;border-radius: 2px;padding: 10px;position: absolute;background-color: #fbd8d4;color: #3b3c40;}</style>
</head>
<body>
<div class="container"><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 myTextboxmyTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);}warningTimeout = window.setTimeout(function() {warningBox.parentNode.removeChild(warningBox);warningTimeout = -1;}, 2000);}
</script>
</body>
</html>
2、event.stopImmediatePropagation —— 下阻止冒泡
Event 接口的 stopImmediatePropagation()
方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation()
,那么剩下的事件监听器都不会被调用。
示例:
<!DOCTYPE html>
<html>
<head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style>
</head>
<body>
<div><p>paragraph</p>
</div>
<script>const div = document.querySelector('div')const p = document.querySelector('p')p.addEventListener("click", (event) => {alert("div");}, false);p.addEventListener("click", (event) => {alert("p");}, false);p.addEventListener("click", (event) => {alert("p1");event.stopImmediatePropagation();// 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.}, false);p.addEventListener("click",(event) => {alert("p2");// 该监听函数排在上个函数后面,该函数不会被执行}, false);document.querySelector("div").addEventListener("click", (event) => {alert("p3,我是p元素的上层元素");// p元素的click事件没有向上冒泡,该函数不会被执行}, false);
</script>
</body>
</html>
3、event.stopPropagation —— 上阻止冒泡
阻止捕获和冒泡阶段中当前事件的进一步传播。
但是,它不能防止任何默认行为的发生; 例如,对链接的点击仍会被处理。
如果要停止这些行为,请参见 preventDefault 方法,它可以阻止事件触发后默认动作的发生。
示例:
<!DOCTYPE html>
<html>
<head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style>
</head>
<body>
<div><p>paragraph</p>
</div>
<script>const div = document.querySelector('div');const p = document.querySelector('p');div.addEventListener("click", (event) => {alert("div");}, false);p.addEventListener("click", (event) => {event. stopPropagation();alert("p");}, false);</script>
</body>
</html>
4、return false —— 这是个蛋蛋?
示例:默认的JS只会触发preventDefault(),因此只有在JQ中return false相当于同时执行了event.stopPropagation()和event.preventDefault()。
<!DOCTYPE html>
<html>
<head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style>
</head>
<body>
<div onclick="clickDiv()"><p onclick="clickP()">paragraph</p>
</div>
<script>
function clickDiv() {alert("div");
}
function clickP() {alert("p");return false;
}
</script>
</body>
</html>
Vue阻止事件冒泡解决方案:
<div @click="clickDiv"><button @click="clickButton"></button>
</div>clickDiv = () => {alert("div");
},
clickButton = (event) => {alert("button");event.stopPropagation();
},或者:<div @click="clickDiv"><button @click.stop="clickButton"></button>
</div>clickDiv = () => {alert("div");
},
clickButton = (event) => {alert("button");
},// 也可以同时串联其他修饰,比如:
@click.stop.prevent=”clickHere“
React阻止事件冒泡解决方案:
<div onClick={clickDiv}><button onClick={clickButton}></button>
</div>const clickDiv = () => {alert("div");
}const clickButton = (event) => {alert("button");event.stopPropagation();
}
JS、Vue、React阻止事件冒泡及阻止默认事件相关推荐
- js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
- JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件 文章目录 JS阻止冒泡和元素默认事件 1.JS阻止冒泡 :stopPropagation() 2.阻止元素默认事件行为 preventDefault() onclick + ...
- Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
- JS 事件高级(包括DOM事件流,阻止事件冒泡,阻止事件默认行为,,,以及对我来说,很好用的 事件代理)
事件对象概念 事件处理函数:事件发生时调用的函数 事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
- 利用事件冒泡和阻止事件冒泡的例子
利用事件冒泡机制 页面中的评分界面,大家一定都很熟悉,现在假如我开了一家饭店,我需要一个在我们的网页上能让顾客对我的饭店进行打分.首先,我们需要两张星星的图片,一张是灰的的星星,一张是黄色的星星,我们 ...
- 事件冒泡及阻止事件冒泡 事件的触发 事件参数对象 获取用户按下键盘的键
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为 参考资料: <锋利的jQuery> 作者:单东林 张晓菲 魏然 出版社: 人民邮电出版社 1.事件冒泡 [javascript] vi ...
- JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...
- jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡 事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
最新文章
- 统一用户及权限管理系统
- 真·摸鱼带师!每天工作10分钟年薪57万,这位程序员火了
- KM(知识管理)与SharePoint Portal
- Java虚拟机的研究与实现
- POJ 2391 Ombrophobic Bovines 网络流 建模
- spring 注入bean的两种方式
- 国家有线网挂牌时间再度推迟 预计为2012年底
- ORA-01841: (完整) 年份值必须介于 -4713 和 +9999 之间, 且不为 0情况解决
- lcl手术和飞秒区别_想知道自己适合哪种近视手术?Mark!
- Codeforces 402 and 403 (Div. 2 and 1)
- 【讨论】对技术的掌握到底应该又多深?
- RedHat_Linux环境下防火墙配置初级入门
- Mac 重装 Apache 后中文目录乱码
- 监听程序当前无法识别连接描述符中请求的服务_Linux I/O复用中select poll epoll模型的介绍及其优缺点的比较...
- J2EE基础教程(3):Spring框架
- 微信扫码提示在浏览器中打开的2种实现方式
- 【光学设计基础】--01像差理论基础
- mas6a801 sw tree disp
- hive登录失败的问题解决
- 2.5 矩阵因式分解(第2章矩阵代数)