Question

当用户点击ID为“main”的div之外的任何地方时，我正在尝试隐藏div。

我正在使用vanilla Javascript，并且不想使用jQuery。

我的代码运行良好，但每当用户点击子子div或任何

文本时，它也会隐藏div，这不是我想要的行为。

window.addEventListener('mouseup', function(event){
	var box = document.getElementById('main');
	if (event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
});

<div id="main" style="display: block; background-color: grey;">

<div id="one1">
<div id="one2" style="background-color: red;"><p>when click here should not hide<br><br>when click here should not hide<br>when click here should not hide<br>when click here should not hide</p></div>

</div>
<div id="one3"><p>when click here should not hide</p></div>


</div>
<p>when click here should hide</p>
<div id="xyz" style="background-color: green;"><p>when click here should hide</p></div>

<p>when click here should hide</p>

Answer 1

嗨，希望我能正确理解你的问题。

当您单击绿色和透明线条时，您想要隐藏所有内容？或者只是div'main'？

目前你的javascript正在添加一个事件监听器'mouseup'。事件监听器的函数有一个if语句检查你是否以'main'为目标。单击时要激活该功能的元素不在主div中。您的DOM树组织不正确！

我已经冒昧地将你的代码稍微调整到我认为你想要实现的目标......这是一个jdFiddle。

jsFiddle

您还可以将事件侦听器和getElementById与以下代码行组合在一起：

select question_id, case when cnt = sum_test then 1 else 0 end as mark from ( select question_id, count(*) cnt, sum(test) sum_test from ( select coalesce(q.question_id, s.question_id) as question_id, correct_option_id, submitted_option_id, case when correct_option_id = submitted_option_id then 1 else 0 end as test from question_answer q full outer join user_exam_answer s on q.question_id = s.question_id and q.correct_option_id = s.submitted_option_id ) x group by question_id ) y

这可能是一种更简单的方法，可以确保您指向正确的div。如果我得到错误的结束，请告诉我。

Answer 2

您可以在Main div上添加单独的侦听器以停止该事件的传播：

window.addEventListener('click', function(event){
    var box = document.getElementById('main');
    box.style.display = 'none';
});

var box = document.getElementById('main');
box.addEventListener('click', function(event) {
    event.stopPropagation();
});

小提琴：https://jsfiddle.net/jaredk/bu5cjh9v/

这是来自答案here，但是那个使用jQuery。

用Javascript隐藏div

2 个答案: