2

非表示の div を正常に切り替える入力ボックスがあります。ただし、ユーザーが div 以外のものをクリックしたときに div を非表示にすることも必要です。どうすればこれを行うことができますか?

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

3 に答える 3

4

要素にイベントリスナーを作成し、イベントがdocument.bodydiv内の要素から発生したかどうかを確認し、そうでない場合は非表示にします。.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/

于 2012-05-09T16:43:29.583 に答える
0

ThiefMaster のアプローチは機能しますが、同じことを行う必要がある場所が複数ある場合は、考慮すべき小さな問題があります。2 つの別個の 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()ことには望ましくない副作用があるということです。電話をかける必要がないのであれば、誰もそのクリックを気にしないことが確実でない限り、電話をかけないほうがよいでしょう。

于 2012-05-09T17:14:26.607 に答える
0

これが機能するかどうか見てみましょう

  1. 通常のリスナーを呼び出して div を非表示にします
  2. 非表示でない場合は div を非表示にするために、本体に追加のリスナーを追加します
  3. div 自体にリスナーを追加して、イベントを停止します (2. 上記)。

また、上 (あなたのもの) と下 (私のもの) のコードはクロスブラウザーではないことに注意してください (addEventListener は IE8 以下では機能しません)。

<!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>
于 2012-05-09T17:47:12.643 に答える