Quick Solution JS Development Blur and click Conflict _javascript skills in the dropdown box

In development we often encounter blur and click Conflicts. The following is a description of the "drop down" problem that is often encountered in development and provides two solutions.

First, Blur and click event Brief

Blur event: Triggers a blur event when the element loses focus, which is a form event, Blur, and focused events are not bubbling, and other form events are available.
Click event: Triggers the Click event when the element is clicked, all elements have this event, and bubbles are generated.

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: Document is non-table cell my
input blur

Example 2:Click event to Bubble

<input type= "Text" id= "tel" >
<script>
  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 results: My
input Click my
document click

Example 3: Clicking on an element causes the previous element to lose focus, and the Blur event takes precedence over the Click event

<input type= "text" id= "IPT" >
<input type= "button" id= "btn" value= "dot 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 results: My
input blur my
button click

Second, the dropdown box blur and click event Conflicts, resulting in the normal selection of values

In actual development, we will often encounter a Drop-down list box, click on the other Elements disappear list box, click the dropdown frame element to make it effective demand. This can be a conflict problem.

<!--DOM structure-->
<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>
    <li><a href= "javascript:" > Sun </a> </li>
    <li><a href= "javascript:" > Lee </a></li>
  </ul>
</div>

/** Description:
 * Currently through the UL outer div custom Attribute "Data-status" Controls whether it displays
/function ($) {
  $ ("input"). focus (function () {
    //input box get focus, display Drop-down box
    $ (". Search-list"). attr ("Data-status", "show");
  }). Blur (function () {
    //input box loses focus, hidden Drop-down box
    $ (". Search-list"). attr ("Data-status", "Hide");
  });
  Select the corresponding option and assign the value to the input box
  $ (". Search-list li a"). Click (function () {
    console.log ("execute");
    $ ("input"). Val ($ (this). text ());
  });
(JQuery);

If you execute the above code, a problem occurs and you do not get a value in the Drop-down box correctly.
reason: because JavaScript is single-threaded, only one event can be executed at the same time. From Example 3 above, you know that "blur takes precedence over click execution." In this example, because the blur handler hides the corresponding Drop-down display area, the subsequent click event is not executed. The information for this console will not be exported either.

Solution 1: delay the Blur event and let Click Execute first.

(function ($) {
  $ ("input"). focus (function () {
    //input box gets the spotlight, displays the Drop-down box
    $ (". Search-list"). attr ("Data-status") , "show");
  Blur (function () {
    settimeout (function () {
      //input box loses focus, hidden Drop-down box
      $ (". Search-list"). attr ("Data-status", " Hide ");
    };
  Select the corresponding option and assign the value to the input box
  $ (". Search-list li a"). Click (function () {
    console.log ("execute");
    $ ("input"). Val ($ (this). text ());
  });
(JQuery);

Iii. use of MouseDown for priority implementation

Example 4: Change the Click event in Example 3 to MouseDown

<input type= "text" id= "IPT" >
<input type= "button" id= "btn" value= "dot Me" >
<script>
  var IPT = document.getElementById ("IPT");
  Ipt.addeventlistener ("Blur", function () {
    console.log ("My input blur");

  var btn = document.getElementById ("btn");
  Btn.addeventlistener ("MouseDown", function () {
    console.log ("my button MouseDown");
</script>
/output: My
button mousedown my
input blur

MouseDown event: The MouseDown event occurs when the mouse pointer moves over the element and the mouse button is pressed.
MouseUp event: A MouseUp event occurs when the mouse button is relaxed on an element.

Attention:
(1) MouseDown is different from the Click event, the MouseDown event only needs to press the key, and it does not need to be loosened to occur.
(2) MouseUp is different from the Click event, the MouseUp event requires only a relaxation button. When the mouse pointer is over the element, relaxing the mouse button triggers the event.

add:MouseDown, MouseUp, click

<input type= "button" id= "btn" value= "dot 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");

Output results:
My button MouseDown
My button MouseUp
My button click

So, the order of execution is:

MouseDown >> MouseUp >> Click

Solution 2: Change the Click event to MouseDown to take precedence over Blur event execution

(function ($) {
  $ ("input"). focus (function () {
    //input box gets the spotlight, displays the Drop-down box
    $ (". Search-list"). attr ("Data-status") , "show");
  Blur (function () {
    //input box loses focus, hidden Drop-down box
    $ (". Search-list"). attr ("Data-status", "Hide");
  });
  Select the corresponding option and assign the value to the input box
  $ (". Search-list li a"). MouseDown (function () {
    $ ("input"). Val ($ (this). text ());
  });
}) (JQuery);

add: js, jquery blur events and click event Conflicts

Problem Description:
In form validation, we tend to trigger a blur event when the input box loses focus, but when the focus is lost, a button is clicked, then the Blur event and click event are triggered, because JS is single-threaded so there is a problem, now need to let Blur first perform verification, Then the click event is triggered.

Workaround:

Set deferred execution settimeout (fn,100) for the button's Click event, setting the delay time greater than the execution time of the Blur event, which performs the Click event after the Blur event is executed.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.