层中层事件问题
今天遇到的问题是这样的:
两个层,一个外层,一个内层,两个层都有onclick事件,点击外层,打开google页面,点击内层,打开baidu页面,我是这样做的
<div onclick="window.open('http://www.google.cn')" style="width:250px;background-color:yellow">
<p>google.cn</p>
<div onclick="window.open('http://www.baidu.com')" style="width:200px;background-color:orange">
<p>baidu.com</p>
</div>
<p>google.cn</p>
</div>
当点击外层的时候,打开google,这里正确的;当点击内层时,出现了即打开baidu,又打开了google,这个效果不是我要的。经过向高人请教,他告诉我一种叫“阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)”可以解决这个问题,我在网上找了相关资料,终于解决了。代码如下:
<script type="text/javascript">
function doSomething (obj,evt) {
window.open(obj);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
</script>
<div onclick="window.open('广州达内http://www.gztarena.com/');" style="width:250px;background-color:cyan;">
<p>google.cn</p>
<div onclick="doSomething('http://www.baidu.com',event);" style="width:200px;background-color:lightblue;">
<p>baidu.com</p>
</div>
<p>google.cn</p>
</div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步