문제
다음 코드가 있습니다.
<span style="margin:0px 2px 0px 2px;">
<asp:Label ID="labelPromptText" runat="server" Text="Selected Location:" />
<span id="spanSelectedLocation" style="padding:2px 2px 2px 2px; cursor:pointer;" onmouseover="javascript:SetBackgroundColor('spanSelectedLocation', '#E0E0E0');" onmouseout="javascript:SetBackgroundColor('spanSelectedLocation', '#FFFFFF');" onclick="ControlLocationsVisibility();">
<asp:Label ID="labelDisplay" runat="server" Text="None" Font-Bold="True" />
<img alt="Click to change" src="Images/downArrow.png" />
</span>
</span>
<asp:Panel ID="panelLocations" runat="server" DefaultButton="buttonFindLocation" style="position:absolute;border:solid 1px #E0E0E0;padding:10px 5px 5px 10px;background-color:#F7F7F7;width:350px;display:none;" >
Search: <asp:TextBox ID="textboxLocationSearch" runat="server" />
<asp:Button ID="buttonFindLocation" runat="server" Text="Find" OnClick="buttonFindLocation_Click" />
<input type="button" value="Cancel" onclick="javascript:ControlLocationsVisibility();"
<hr />
<asp:TreeView ID="TreeViewLocations" runat="server" OnSelectedNodeChanged="TreeViewLocations_SelectedNodeChanged" NodeIndent="10"></asp:TreeView>
</asp:Panel>
누군가가 패널에서 클릭 할 때 패널로 션을 숨길 수 있기를 원합니다. 나는 패널로 공급의 Onblur 이벤트를 시도했지만 TreeView를 클릭하면 항상 사라집니다.
누군가가 외부에서 클릭하지만 그 안에 있지 않을 때 패널을 숨기려면 어떻게해야합니까?
해결책
settimeout () 및 cleartimeout ()을 사용하는 경우 언급 한 것처럼 블루 벤트를 사용할 수 있지만 패널 내부의 내부에 초점이 맞출 때 시간 초과를 지우십시오. 그렇게하면 이벤트가 실행 될 유일한 시간은 "실제로"초점을 잃었을 때일 것입니다.
다른 팁
다른 대안은 신체에서 이벤트를 클릭하는 것이지만 상당히 빠르게 느리게 될 수 있습니다. 당신이 그 길을 가면, 그것은 다음과 같은 것처럼 보일 것입니다.
<html>
<head>
<title>Hide Test</title>
</head>
<body>
<div id="first">
<p>This is the first div.</p>
</div>
<div id="second">
<p>This is the second div.</p>
</div>
<script type="text/javascript">
var first = document.getElementById("first");
var second = document.getElementById("second");
var isChildOf = function (ele, parent) {
if (ele.parentNode === null) {
return false;
} else if (ele.parentNode === parent) {
return true;
} else {
return isChildOf(ele.parentNode, parent);
}
};
document.body.onclick = function(e) {
if (isChildOf(e.target, second)) {
console.log("Hiding second.");
second.style.display = 'none';
} else {
console.log("Showing second.");
second.style.display = 'block';
}
};
</script>
</body>
</html>
제휴하지 않습니다 StackOverflow