Solve the conflict between blur and click (turn - back up by yourself)

In development, we will often encounter the conflict between blur and click. The following describes the problem of "drop-down box" that is often encountered in development, and provides two solutions.

1. Brief description of blur and click events
The blur event: triggers the blur event when the element loses focus; it is a form event, the blur and focus events will not bubble, and other form events can.
click event: The click event is triggered when the element is clicked; all elements have this event, which will cause bubbling.
Example 1: The blur event is a form event

<input type="text" id="tel">
<script>
    document.addEventListener("blur", function(){
        console.log("my document blur");
    });

    var ipt = document.getElementById("tel");
    ipt.addEventListener("blur", function(){
        console.log("my input blur");
    });
</script>
// output result: document is not Form element
my input blur
example 2: click event can bubble

<

    document.addEventListener("click", function(){
        console.log("my document click");
    });

    var ipt = document.getElementById("tel");
    ipt.addEventListener("click", function(){
        console.log("my input click");
    });
</script>
// Output result:
my input click
my document click
Example 3: Clicking on an element causes the previous element to lose focus, the blur event takes precedence over the click event

<input type="text" id="ipt">
<input type="button" id="btn" value="Click me">
<script>
    var ipt = document.getElementById("ipt");
    ipt.addEventListener(" blur", function(){
        console.log("my input blur");
    });

    var btn = document.getElementById("btn");
    btn.addEventListener("click", function(){
        console.log("my button click");
    });
</script>
// output:
my input blur
my button click
2. The blur and click events of the drop-down box conflict, resulting in the inability to select the value normally. In
actual development, we often encounter a drop-down list box, click other elements to disappear the list box; click the sub-element of the drop-down box to make it effective. This creates a conflict problem.

<!-- DOM structure representation-->
<input type="text" placeholder="Please select last name" readonly>
<div class="search-list" data-status="hide">
    <ul>
        <li>< a href="javascript:">Zhao</a></li>
        <li><a href="javascript:">Money</a></li>



</div>
/** Description:
* Currently, whether it is displayed or not is controlled by the custom attribute "data-status" of the outer div of ul  
*/
(function($){
    $("input").focus(function(){
        / / The input box gets the focus and displays the drop-down box
        $(".search-list").attr("data-status", "show");
    }).blur(function(){
        // The input box loses focus, hides the drop -down Box
        $(".search-list").attr("data-status", "hide");
    });
    // Select the corresponding option and assign it to the input box
    $(".search-list li a"). click(function(){
        console.log("execute");
        $("input").val($(this).text());
    });
})(jQuery);
Execute the above code, a The problem is that a value in the drop-down box cannot be obtained correctly.
Reason: Since JavaScript is single-threaded, only one event can be processed at a time. From the above example 3, it can be known that "blur is executed prior to click". In this example, because the blur handler hides the corresponding drop-down box display area, its subsequent click events will not be executed. The above console information will not be output either.

Solution 1: Delay the blur event and let the click execute first.

(function($){
    $("input").focus(function(){
        // The input box gets the focus and displays the drop-down box
        $(".search-list").attr("data-status", "show" );
    }).blur(function(){
        setTimeout(function(){
            // input box loses focus, hide drop-down box
            $(".search-list").attr("data-status", "hide");
        }, 300);
    });
    // Select the corresponding option and assign it to the input box
    $(".search-list li a").click(function(){
        console.log("Execute");
        $("

// Output: my button mousedown my input blur mousedown event: When the mouse pointer moves over the element and the mouse button is pressed, the mousedown event occurs. mouseup event: The mouseup event occurs when the mouse button is released on an element.





















Note:
(1) The mousedown event is different from the click event. The mousedown event only requires the key to be pressed, and does not need to be released.
(2) mouseup is different from the click event, the mouseup event only needs to relax the button. This event is fired when the mouse button is released when the mouse pointer is over the element.
Added: mousedown, mouseup, click

<input type="button" id="btn" value="click me">
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function(){
    console.log("my button mousedown");
});
btn.addEventListener("click", function(){
    console.log("my button click");
});
btn.addEventListener("mouseup", function( ){
    console.log("my button mouseup");
});






mousedown >> mouseup >> click

Solution 2: Change the click event to mousedown and let it execute before the blur event

(function($){
    $("input").focus(function(){
        // input box gets focus , show the drop-down box
        $(".search-list").attr("data-status", "show");
    }).blur(function(){
        // input box loses focus, hide drop-down box
        $(". search-list").attr("data-status", "hide");
    });
    // Select the corresponding option and assign it to the input box
    $(".search-list li a").mousedown(function() {
        $("input").val($(this).text());
    });
})(jQuery);
Copyright notice: This article is an original article by the blogger and may not be reproduced without the blogger's permission. Please indicate the source for reprinting: http://blog.csdn.net/ligang2585116! http://blog.csdn.