Question

只有在未点击一组元素的情况下，您才能以什么方式触发on blur样式事件。例如：如果您想在输入后进行自定义下拉，那么这是我想要实现的一个小提琴; http://jsfiddle.net/hruahrpc/ 单击不在第一个列表中的任何元素，应该导致列表崩溃。

我试图阻止模糊，但我似乎无法让它发挥作用。

＆＃13;

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

＆＃13;

.results{
    background-color:pink;
}

＆＃13;

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

＆＃13;

单击第一个列表中不存在的任何元素，都会导致列表崩溃。

Answer 1

这就是我这样做的方式。希望我一直很有帮助。

问候。

$('ul').hide()
$('input').focus(
    function(){    
        $('ul').show()
    }
);

$('input').blur(
    function(e){
        e.preventDefault();
        $('.hidelist').click(function(){
            $('ul').hide();
        });
        // You can handle other thing here
    }
);

.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>
        <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>

或者使用它：

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

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

Answer 2

你可以这样做。这有点复杂但是由于事件的顺序很难找到一种方法来做你想要的但是这有效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>

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

2 个答案: