JavaScript+；事件传播

我有一个输入框，可以成功切换隐藏的div。但是，我也希望当用户单击div本身以外的任何内容时，div会隐藏。我该怎么做

html

<input id="inputID" type="text" readonly />
<div id="divID"></div>

---

在

document.body

元素上创建一个事件侦听器，并检查事件是否源自div中的元素，如果不是，则将其隐藏。您可以通过不检查原点，而只是通过调用事件对象上的

.stopPropagation（）

来防止来自div内部的单击事件冒泡，从而稍微简化这项工作

divObj.addEventListener('click', function(e) {
    e.stopPropagation();
}, false);
document.body.addEventListener('click', function(e) {
    divObj.style.display = 'none';
}, false);

---

演示：

在

document.body

元素上创建一个事件侦听器，并检查事件是否源自div中的元素，如果不是，则将其隐藏。您可以通过不检查原点，而只是通过调用事件对象上的

.stopPropagation（）

来防止来自div内部的单击事件冒泡，从而稍微简化这项工作

divObj.addEventListener('click', function(e) {
    e.stopPropagation();
}, false);
document.body.addEventListener('click', function(e) {
    divObj.style.display = 'none';
}, false);

---

thefMemor的方法，但如果你有多个地方需要做同样的事情，那么要考虑的问题很小。假设您需要对两个单独的div执行相同的操作，然后调用

e.stopPropagation（）

将导致在单击div2时div1不会被隐藏

范例

div1.addEventListeners('click', function(e){
    e.stopPropagation();
}, false);
div2.addEventListener('click', function(e) {
    e.stopPropagation();
}, false);
document.body.addEventListener('click', function(e) {
    div1.style.display = 'none';
    div2.style.display = 'none';
}, false);

因此，更安全的选择是（为了简单起见，我将使用jQuery）

---

我的观点是，调用<代码>停止传播（）/代码>可能会有不必要的副作用，如果你不需要这样做，最好不要这样做，除非你确信没有人会在意这个点击。

thefMistor的方法是有效的，但是如果你有多个地方需要做同样的事情，就有一个小问题要考虑。假设您需要对两个单独的div执行相同的操作，然后调用

e.stopPropagation（）

将导致在单击div2时div1不会被隐藏

范例

div1.addEventListeners('click', function(e){
    e.stopPropagation();
}, false);
div2.addEventListener('click', function(e) {
    e.stopPropagation();
}, false);
document.body.addEventListener('click', function(e) {
    div1.style.display = 'none';
    div2.style.display = 'none';
}, false);

因此，更安全的选择是（为了简单起见，我将使用jQuery）

---

我的观点是，调用

stopPropagation（）

可能会产生不必要的副作用，如果你不必这样做，最好不要这样做，除非你确定没有人会在意那次点击。

让我们看看这是否有效

调用普通侦听器隐藏div

在正文中添加一个附加的侦听器，以隐藏未隐藏的div

向div本身添加一个侦听器以停止事件（见上文2）

• 这被称为
• 单击div，最终是单击主体
• 你不想打2。当您在div中单击时

另外，请注意上面（您的）和下面（我的）的代码不是跨浏览器的（addEventListener在IE8及以下版本中不起作用） 希望您忽略这一点，下面是带有JS的HTML

实验室
#迪维德{
宽度：100px；
高度：100px；
保证金：0自动；
利润上限：85px；
边框：1px实心#020202；
//多余的东西
-moz边界半径：2px；
-webkit边界半径：2px；
-moz盒阴影：0 0 8px#5656；
-网络工具包盒阴影：0 0 8px#5656；
}
var divObj=document.getElementById（'divID'），
inputObj=document.getElementById（'inputID'）；
inputObj.addEventListener（'click'，toggleDiv，false）；
document.body.addEventListener（'click'，docClick，false）；
divObj.addEventListener（'click'，divClick，false）；
函数divClick（e）{
//如果单击div中的任何元素
//当点击到达div时，停止上面的操作
e、 停止传播（）；
}
功能docClick（e）{
如果（divObj.style.display！=“无”）{
divObj.style.display='none'；
}
}
功能切换DIV（e）{
e、 停止传播（）；
divObj.style.display=（divObj.style.display=='none'）？'block'：'none'；
}

让我们看看这是否有效

调用普通侦听器隐藏div

在正文中添加一个附加的侦听器，以隐藏未隐藏的div

向div本身添加一个侦听器以停止事件（见上文2）

• 这被称为
• 单击div，最终是单击主体
• 你不想打2。当您在div中单击时

另外，请注意上面（您的）和下面（我的）的代码不是跨浏览器的（addEventListener在IE8及以下版本中不起作用） 希望您忽略这一点，下面是带有JS的HTML

实验室
#迪维德{
宽度：100px；
高度：100px；
保证金：0自动；
利润上限：85px；
边框：1px实心#020202；
//多余的东西
-moz边界半径：2px；
-webkit边界半径：2px；
-moz盒阴影：0 0 8px#5656；
-网络工具包盒阴影：0 0 8px#5656；
}
var divObj=document.getElementById（'divID'），
inputObj=document.getElementById（'inputID'）；
inputObj.addEventListener（'click'，toggleDiv，false）；
document.body.addEventListener（'click'，docClick，false）；
divObj.addEventListener（'click'，divClick，false）；
函数divClick（e）{
//如果单击div中的任何元素
//当点击到达div时，停止上面的操作
e、 停止传播（）；
}
功能docClick（e）{
如果（divObj.style.display！=“无”）{
divObj.style.display='none'；
}
}
功能切换DIV（e）{
e、 停止传播（）；
divObj.style.display=（divObj.style.display=='none'）？'block'：'none'；
}

你能举一个这样的例子吗？抱歉，有点像js noob。哦，你也必须停止

inputBj

click事件的传播。那就行了，太棒了！我也得出了这个结论！谢谢你的帮助，js事件模型现在对我来说更清晰了