The solution to the conflict between the blur lost focus event and the click event in the input

I encountered a problem, that is, the blur event of the input box input conflicts with the click event. When clicking, the blur event will be triggered first, and the click will not be triggered.

 

// remark name
$(function(){
  $(".cy-name-input input").on({
    focus:function() {
      $(".cy-close").css('display','block');
    },
    blur:function() {
      setTimeout(function(){
        $(".cy-close").css('display','none');
      },250)
    }
  })
  $(".cy-close").click(function(){
    $(".cy-name-input input").val('');
  })
})

 

 

There is also a situation where the drop-down box blur and the click event conflict, resulting in the inability to select the value normally

Reason: Since JavaScript is single-threaded, only one event can be processed at a time. "blur is executed in preference to click". In this example, because the blur handler will hide the display area of ​​the drop-down box, its subsequent click events will not be executed.

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

$("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(){
            // The input box loses focus and hides the 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");
        $("input").val($(this).text());
    });

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

$("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 and 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").mousedown(function(){
        $("input").val($(this).text());
    });

 mousedown event: The mousedown event occurs when the mouse pointer is moved over an element and the mouse button is pressed.

mouseup event: The mouseup event occurs when the mouse button is released on an element. 

Notice: 

(1) The mousedown event is different from the click event. The mousedown event only requires the button 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.

 

 

Its execution sequence is: mousedown >> mouseup >> click

 

Reference URL: http://blog.csdn.net/ligang2585116/article/details/51764828