JavaScript +事件传播

cedebl8k 于 2023-01-29 发布在 Java

关注(0)|答案(3)|浏览(105)

我有一个输入框，它可以成功地切换隐藏的div。但是，我还希望当用户单击除div本身以外的任何东西时，div也隐藏起来。我该怎么做呢？

超文本标记语言

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

日本

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'; 
}

JavaScript

来源：https://stackoverflow.com/questions/10520436/javascript-event-propagation

3条答案

按热度按时间

vaj7vani1#

在document.body元素上创建一个事件侦听器，检查事件是否来自div中的某个元素，如果不是，则隐藏它。您可以通过不检查事件来源，而只是通过在事件对象上调用.stopPropagation()来防止div中的单击事件冒泡，从而使这项工作变得简单一些。

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

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

赞(0）回复(0）举报 2023-01-29

zbwhf8kr2#

让我们看看这是否有效
1.调用普通侦听器隐藏div
1.添加一个额外的侦听器到这身体隐藏您的div如果没有隐藏

向div本身添加一个侦听器以停止事件（上面的2.）
这称为Event Propagation
你点击div，最终是点击body
你不想调用2.当你点击div内部时

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

<!DOCTYPE HTML>
<html>
<head>
    <title>Lab</title>
    <style type="text/css">
        #divID {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 85px;
            border: 1px solid #020202;

            // Unnecessary stuff
            -moz-border-radius:     2px;
            -webkit-border-radius:  2px;

            -moz-box-shadow:    0 0 8px #565656;
            -webkit-box-shadow: 0 0 8px #565656;
        }
    </style>
</head>
<body>
    <input id="inputID" type="text" readonly="readonly" />
    <div id="divID"></div>
</body>

<script type="text/javascript">

    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);

    function divClick(e) {
        // if you click any element inside the div
        // when the click reaches the div, stop going above
        e.stopPropagation();
    }

    function docClick(e){
        if (divObj.style.display !== 'none') {
            divObj.style.display = 'none';
        }
    }

    function toggleDiv(e) {
        e.stopPropagation();
        divObj.style.display = (divObj.style.display === 'none') ? 'block' : 'none'; 
    }

</script>

</html>

赞(0）回复(0）举报 2023-01-29

s3fp2yjn3#

ThiefMaster的方法是可行的，但是如果您有多个地方需要做同样的事情，则需要考虑一个小问题：假设您需要对两个单独的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）http://jsfiddle.net/qzMnj/1/

$(function() {
    function hideWhenClickOutside(element) {
      $(document).click(function(e){
        if ( !element.contains(e.target)) {
            $(element).hide();
        }
      });
    }

    hideWhenClickOutside(document.getElementById('div1'));    
    hideWhenClickOutside(document.getElementById('div2'));
})

我的观点是，调用stopPropagation()可能会产生不必要的副作用，如果你不必这样做，最好不要这样做，除非你确定没有人会关心那个点击。

赞(0）回复(0）举报 2023-01-29

我来回答

JavaScript +事件传播

3条答案

相关问题

热门标签

最新问答