javascript - javascript 中 "off button"下的 "on button"

Question

我有一些圆 div，当单击切换时使用 javascript 显示子 div，但我想让圆 div 周围的区域隐藏子 div。如果您将取消选择函数绑定(bind)到圆圈的容器，它们将停止工作，因为这两个函数取消了所以我尝试在容器内有一个单独的 div，它使用 css position 和 z-index 占据与容器相同的空间而无需“parent circle divs”作为它的 child 。这也不起作用，因为取决于 z-index 值，一个元素或另一个元素运行其函数，如果它们具有相同的 z-index，则圆圈 :hover 甚至不起作用，更不用说 Javascript 了。

Codepen.io

    var tydParent = [null, document.getElementById("tydP1"), document.getElementById("tydP2"), document.getElementById("tydP3"), document.getElementById("tydP4"), document.getElementById("tydP5"), document.getElementById("tydP6"), document.getElementById("tydP7"), document.getElementById("tydP8"), document.getElementById("tydP9"), document.getElementById("tydP10")
    ]
    
    var tydChild = [null, document.getElementById("tydC1"), document.getElementById("tydC2"), document.getElementById("tydC3"), document.getElementById("tydC4"), document.getElementById("tydC5"), document.getElementById("tydC6"), document.getElementById("tydC7"), document.getElementById("tydC8"), document.getElementById("tydC9"), document.getElementById("tydC10")
    ]
    
    var tydState = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    
    function tydToggle(tydNum) {
    	if (tydState[tydNum] == 0) {
    		tydDeselect();
    		tydParent[tydNum].className = "tydParentActive shadow4a tydParent";
    		tydChild[tydNum].style.display = "block";
    		tydState[tydNum] = 1;
    	} else {
    		tydParent[tydNum].className = "shadow4a tydParent";
    		tydChild[tydNum].style.display = "none";
    		tydState[tydNum] = 0;
    	}
    }
    
    function tydDeselect() {
    	for (i = 1; i < tydState.length; i++) {
    			tydState[i] = 0;
    			tydChild[i].style.display = "none";
    			tydParent[i].className = "shadow4a tydParent";
    		}
    }

        .tydContainer {
        	position:relative;
        	height: auto;
        	width: 100%;
        	margin: 0;
        	padding:0 75px;
        	display: -webkit-box;
        	display: -webkit-flex;
        	display: -ms-flexbox;
        	display: flex;
        	-webkit-flex-wrap: wrap;
        	    -ms-flex-wrap: wrap;
        	        flex-wrap: wrap;
        	-webkit-justify-content: space-around;
        	    -ms-flex-pack: distribute;
        	        justify-content: space-around;
        }
        
        .tydParent {
        	/*z-index:2;*/
        	width: 110px;
        	height: 110px;
        	border: 2px solid #93305D;
        	border-radius: 55px;
        	margin: 10px;
        	cursor:pointer;
        	background-color: #cccccc;
        }
        
        .tydParent:hover{
        	background-color: #93305D;
        	border-color: #F2F1F1;
        }
        
        .tydParentActive{
        	background-color: #F63E37 !important;
        	border-color: #F2F1F1 !important;
        }
        
        .tydParentPosition {
        	position: relative;
        }
        
        .tydClickoff{
        	/*z-index:1;*/
        	position: absolute;
        	width:100%;
        	height:100%;
        	bottom:0;
        	left:0;
        }
        
        .tydChild {
        	z-index:3;
        	overflow:hidden;
        	display: none;
        	position: absolute;
        	bottom: 100%;
        	width: 350px;
        	height: 300px;
        	left: -110px;
        	background-color: #E3EBF1;
        	border-radius: 10px;
        	border: 1px solid #333333;
        }
        
        .tydImageBlock {
        	display: flex;
        	width: 350px;
        	height: 70%;
        	margin: 5px 0;
        }
        
        p.tydChildDescription {
        	width: 100%;
        	height: 30%;
        	line-height: 16px;
        	font-size:14px;
        	padding: 10px;
        	color: #333333;
        	text-align: center;
        } 
    #tydP1 {
    	background-image: url('test2.png');
    }
    
    #tydP2 {
    	background-image: url('test2.png');
    }
    
    #tydP3 {
    	background-image: url('test2.png');
    }
    
    #tydP4 {
    	background-image: url('test2.png');
    }
    
    #tydP5 {
    	background-image: url('test2.png');
    }
    
    #tydP6 {
    	background-image: url('test2.png');
    }
    
    #tydP7 {
    	background-image: url('test2.png');
    }
    
    #tydP8 {
    	background-image: url('test2.png');
    }
    
    #tydP9 {
    	background-image: url('test2.png');
    }
    
    #tydP10 {
    	background-image: url('test2.png');
    }

	<div class="tydContainer">

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP1" onclick="tydToggle(1)"></div>
			<div class="shadow4a tydChild" id="tydC1"  style="background: url('KQLY2.png');">
				<div class="tydImageBLock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP2" onclick="tydToggle(2)"></div>
			<div class="shadow4a tydChild" id="tydC2" style="background: url('KQLY1.png');">
				<div class="tydImageBlock" ></div>
				<p class="tydChildDescription bOWhite1">stack overflow<a href="https://sakaiproject.org/">MORE&#8680;</a></p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP3" onclick="tydToggle(3)"></div>
			<div class="shadow4a tydChild" id="tydC3" style="background: url('KQLY3.png');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP4" onclick="tydToggle(4)"></div>
			<div class="shadow4a tydChild" id="tydC4" style="background: url('KQLY4.gif');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP5" onclick="tydToggle(5)"></div>
			<div class="shadow4a tydChild" id="tydC5" style="background: url('KQLY5.gif');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP6" onclick="tydToggle(6)"></div>
			<div class="shadow4a tydChild" id="tydC6" style="background: url('KQLY6.gif');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP7" onclick="tydToggle(7)"></div>
			<div class="shadow4a tydChild" id="tydC7" style="background: url('KQLY4.gif');"> 
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP8" onclick="tydToggle(8)"></div>
			<div class="shadow4a tydChild" id="tydC8" style="background: url('KQLY3.png');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP9" onclick="tydToggle(9)"></div>
			<div class="shadow4a tydChild" id="tydC9" style="background: url('KQLY2.png');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydParentPosition">
			<div class="shadow4a tydParent" id="tydP10" onclick="tydToggle(10)"></div>
			<div class="shadow4a tydChild" id="tydC10" style="background: url('KQLY6.gif');">
				<div class="tydImageBlock"></div>
				<p class="tydChildDescription bOWhite1">stack overflow</p>
			</div>
		</div>

		<div class="tydClickoff" style="border: 1px solid violet;" onclick="tydDeselect()"></div>
	
	</div>
</div>

Answer 1

您应该使用 event.stopPropagation() 阻止点击事件传播到外部 div。

参见 https://plnkr.co/edit/MqNhHJy9m5vtgrwOWgVh?p=preview

onclick="tydToggle(event, 1)"
...
function tydToggle(event, tydNum) {
    event = event || window.event;
    event.stopPropagation()
    ...