JavaScript +事件传播 [英] JavaScript + event propagation

问题描述

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

I have an input box that successfully toggles a hidden div. However, I also want the div to hide when the user clicks anything other than the div itself. How might I do this?

html

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

js

var divObj = document.getElementById('divID');
var inputObj = document.getElementById('inputID');

inputObj.addEventListener('click', toggleDiv, false);
function toggleDiv(){
    divObj.style.display = (divObj.style.display == 'none') ? 'block' : 'none'; 
}

推荐答案

在<上创建一个事件监听器code> document.body 元素并检查事件是否来自div中的元素，如果不隐藏它。你可以通过不检查原点来简化这项工作，但只是通过在事件对象上调用 .stopPropagation（）来阻止div中的点击事件冒泡。 / p>

Create an event listener on document.body element and check if the event originated from an element inside your div and if not hide it. You can ease this job up a bit by not checking the origin but simply preventing click events from inside your div from bubbling up by calling .stopPropagation() on the event object.

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

演示： http://jsfiddle.net/ThiefMaster/D7YnS/

这篇关于JavaScript +事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！