javascript - 如果未单击一组元素，如何触发事件

Question

仅当一组元素未被单击时，您才能以什么方式触发 on blur 样式事件。例如:如果您想在输入后进行自定义下拉，这是我想要实现的目标； http://jsfiddle.net/hruahrpc/单击不在第一个列表中的任何元素应该会导致列表折叠。

我试过停止模糊，但我似乎无法让它工作。

$('ul').hide();
$('input').focus(
    function(){    
        $('ul').show()
    }
);
$('.hidelist').click(
    function(){
        $('ul').hide();
    }

)
$('input').blur(
    function(){
        $('ul').hide();
    }
);

.results{
    background-color:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<div class="results">
    <ul>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
    </ul>
    <ul class="hidelist">    
        <li><a href="#"  >I make the list disapear</a></li>
    </ul>
</div>


<div>I am any other element and I make the list disapear</div>

点击任何不在第一个列表中的元素，应该会导致列表折叠。

Answer 1

你可以这样做。这有点复杂，但由于事件的顺序，很难想出一种方法来做你想做的事，但这行得通 working fiddle :

Javascript 代码:

var stopHide = false;
var okToExecute = false;
var blurTest = false;
var timeout = undefined;
$('ul').hide()
$('#input1').focus(
    function(){
        $('ul').show();
    }
);
$('.hidelist').click(
    function () {
        stopHide = false;
        okToExecute = true;
        $('#input1').blur();
    }
);
$('.dontHide').click(
    function() {
        stopHide = true;
        okToExecute = true;
        $('#input1').blur();
    }
);
$('input').blur(
    function(e){
        e.preventDefault();
        if(okToExecute)
        {
            if(!stopHide)
            {
                $('ul').hide();
            }
            else
            {
                $('#input1').focus();
            }
            okToExecute = false;
            blurTest = true;
        }
        if(timeout == undefined)
        {
            timeout = true;
            setTimeout(function(){console.log(blurTest);if(!blurTest){                      $('ul').hide();}blurTest = false;timeout = undefined;}, 200);
        }
    }
);

HTML:

<input id="input1" type="text" />
<div class="results">
    <ul>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="hidelist" >I make the list disapear</a></li>
    </ul>
</div>
</br>
<div>I am any other element and I make the list disapear</div>