当我单击子 div 时如何关闭父 div 函数，当我再次单击父 div 时，该函数将活动
[英]How can I close parent div function when I clicked child div and when I clicked parent div again, the function will activity
问题描述
I want to let user go to some website when he clicked my website background picture(parent div), but the function need be closed when user clicked my website content(child div), and then when user clicked the background picture(parent div) again, the function will be activity.
我想让用户在单击我的网站背景图片（父 div）时访问某个网站，但是当用户单击我的网站内容（子 div）时需要关闭该功能，然后当用户单击背景图片（父 div）时关闭该功能再次，功能将是活动。
I try many times, but when I clicked my website content(child div), and clicked website background picture(parent div) again, the function didn't work.我尝试了很多次，但是当我单击我的网站内容（子div），然后再次单击网站背景图片（父div）时，该功能不起作用。
What can I do?我能做什么？ Thank you!谢谢！
Here is my code:这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(){
bgADlink=false;
return i = 1;
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
4 个解决方案
解决方案1
0 2019-01-04 11:14:45
There are different problems in your code.您的代码中存在不同的问题。
Because events propagate from an inner element, to it's parent element (not only parent but all the hierarchy up), the "tt" div will always fire, so the best thing to do is to stop the propagation of the events with因为事件从内部元素传播到它的父元素（不仅是父元素，而且是所有向上的层次结构），“tt”div 将始终触发，所以最好的办法是停止事件的传播
onclick="event.stopPropagation();test1()"
I don't really understand what you're trying to accomplish with the "i" and why your having a function bgADlink() and then assigning it a Boolean, JavaScript lets you do that, but basically your function is now a Boolean.我真的不明白你想用“i”完成什么，为什么你有一个函数 bgADlink() 然后给它分配一个布尔值，JavaScript 允许你这样做，但基本上你的函数现在是一个布尔值。
I made you a small sample fiddler yo you can see the stopPropagation working, hope it helps.我给你做了一个小样本提琴手，你可以看到 stopPropagation 工作，希望它有帮助。
https://jsfiddle.net/pimboden40/kg9wfdqj/29/ https://jsfiddle.net/pimboden40/kg9wfdqj/29/
解决方案2
0 2019-01-04 11:16:51
this snippet is not opening parent div link either..but use this on html page then try it这个片段也没有打开父 div 链接..但是在 html 页面上使用它然后尝试它
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Test!</title> <style type="text/css"> .head{ background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px; text-align:center; padding:10px; } .tt{ width:100%; height:100%; border:1px solid red; } .content{ width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue; border:1px solid blue; } </style> <script type="text/javascript"> var i = 0; function test1(){ if(i == 0 || i == 1) bgADlink(); return i = 0; } function test2(varr,event){ // bgADlink=false; event.stopPropagation(); return i = 1; } function bgADlink(){ console.log("bgADlink") window.open('https://www.google.com'); } </script> </head> <body style="margin:0px; background-color:#eeeeee;"> <div class="head">Test</div> <div class="tt" onclick="test1()"> <div class="content" onclick="test2('',event)"></div> </div> </body> </html>
解决方案3
0 2019-01-04 11:18:41
I am not sure that is what you need, but basically you need to stop event bubbling from child to parent.我不确定这是你需要的，但基本上你需要停止从孩子到父母的事件冒泡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
$(document).ready(function(){
$(".tt").on("click",function(){
bgADlink();
});
$(".content").on("click",function(e){
e.stopPropagation();
});
});
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
解决方案4
0 已采纳 2019-01-04 11:18:44
just remove that ||只需删除 || i == 1 condition from test1() function like below. i == 1 条件来自 test1() 函数，如下所示。
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
check this fiddle https://jsfiddle.net/ca7Lbsy3/检查这个小提琴https://jsfiddle.net/ca7Lbsy3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.