当我点击子div时，如何关闭父div函数，当我再次点击父div时，该函数将activity
我想让用户在点击我的网站背景图片（父图）时进入某个网站，但当用户点击我的网站内容（子图）时，该功能需要关闭，然后当用户再次点击背景图片（父图）时，该功能将被activity。
我尝试了很多次，但当我点击我的网站内容（子div），并再次点击网站背景图片（父div），该功能不起作用。
我能做什么？谢谢！
下面是我的代码：
<!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>
共有2个答案
我不确定这是您需要的，但基本上您需要阻止事件从子级到父级冒泡。
<!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>
只需从test1()函数中删除i==1条件，如下所示。
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
检查此fiddle https://jsfidle.net/ca7lbsy3/
-
下面是我的代码：（它非常混乱，我只是在收集我的想法。我有一个更正式的程序，它要大得多，我将在稍后实现它） 当我选择A-E时，我会弹出一个带有“选择”或“取消”的对话框。我不希望原来的框架关闭。
-
本文向大家介绍jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，包括了jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接上代码吧 效果截图： 以上这篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大
-
问题内容： 我正在使用此代码： 和这个 HTML ： 问题是我的链接位于内，单击时它们不再起作用。 问题答案： 遇到同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：
-
问题内容： 这是该问题的后续问题：具有焦点的AngularJS输入会杀死list的ng-repeat过滤器 基本上，我的代码是使用AngularJS在右侧弹出一个div（抽屉）以过滤事物列表。大多数情况下使用此功能时，UI会被阻止，因此单击该阻止div会关闭抽屉。但是在某些情况下，我们不会阻止用户界面，需要允许用户在抽屉外部单击以取消搜索或选择页面上的其他内容。 我最初的想法是在抽屉打开时附加一个
-
问题内容： 在隐藏其父级Div的同时如何显示子Div？能做到吗？ 我的代码如下： 问题答案： 我认为这是不可能的。 您可以使用javascript将元素拉出，或复制元素然后显示。 在jQuery中，您可以复制一个元素 然后附加到任何适当的可见元素。
-
我当前有一个div元素具有repeat-y背景，一个子div中断当前背景。 我怎么才能阻止这一切的发生？ css:#content{float：left；margin：5px自动；border：red 1px实心；}