Share the solution to the conflict between jquery focusout and click events

When searching on mainstream search engines, smart prompts will often pop up when you enter content. The input box is input, and the smart prompt area is suggestion. There are generally two operations next:

1. Select a prompt, copy the content into the input, and automatically close the suggestion;

2. Click elsewhere on the web page to automatically close the suggestion.

To realize the first one, you can use click event, add the mouse click event in the suggestion, write the clicked content to the input during processing, and then close the suggestion. There is no problem when tested alone;

To implement the second one, you can add a focusout event or a blur event on the input element, and close the suggestion when the input loses focus. No problem when tested alone.

But when put together, there will be problems. It only responds to the lost focus event (the suggestion is closed), but does not respond to the content click event (the clicked suggestion content is not obtained).

I don’t understand why there is a conflict. I searched online and found some similar problems. Some people suggested using blur, but blur is the same as focusout and neither works.

After thinking about it, I suddenly thought of the triggering conditions of the click event. When you click a button, a click event is triggered, and a click includes: click the mouse and release the mouse. The click event of jquery is triggered after the mouse is released (in fact, the click events of button elements and href elements are like this), so you can understand the conflict problem that just occurred. You click For a certain prompt in suggest, the input loses focus event is triggered at this time, closing the suggest area, and then your mouse is released (the computer response speed is faster than the mouse click and release speed), and the click is completed, but at this time the mouse It is no longer on the prompt to select the suggestion, so the click event in the suggestion cannot be triggered.

After I figured this out, the problem was solved. I changed the response in the suggestion to mousedown, so that it will be triggered when the mouse is clicked. I tested it and it was successful. Now, both the mousedown event and the focusout event have been handled correctly.

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

Replacing click with mousedown is completely ok. It’s so simple that I’m embarrassed to say it, but sometimes it’s not easy to think of it!

In addition, I also found other methods on the Internet. One is

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

This method uses hidden animation to cause delays, making the suggest The click event of the area can be triggered. However, slide is not suitable for all situations, and it is not appropriate to base the success of the function on the speed of animation hiding.

Another method is to wrap the input and suggestion in a div, and add the event directly to the div. This has not been tested, but in theory it should be possible.

The above is the detailed content of Share the solution to the conflict between jquery focusout and click events. For more information, please follow other related articles on the PHP Chinese website!