Javascript blur and click conflict resolution solution

Resolving the conflict between blur and click

Foreword:

In development, we often encounter conflicts between blur and click. The following describes the "drop-down box" problems commonly encountered in development, and provides two solutions.

1. Brief description of blur and click events

blur event: The blur event is triggered when the element loses focus; it is a form event, the blur and focus events will not bubble, and other form events will Can.

Click event: A click event is triggered when an 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>
// 输出结果：document为非表单元素
my input blur

Example 2: The click event can 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>
// 输出结果：
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="点我">
<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>
// 输出结果：
my input blur
my button click

2. Drop-down box blur Conflicts with the click event, causing the value to be unable to be selected normally

In actual development, we often encounter the need to click on a drop-down list box and disappear the list box on other elements; click on the sub-element of the drop-down box to make it effective. This will lead to conflict problems.

<!-- DOM结构示意 -->
<input type="text" placeholder="请选择姓氏" readonly>
<div class="search-list" data-status="hide">
  <ul>
    <li><a href="javascript:">赵</a></li>
    <li><a href="javascript:">钱</a></li>
    <li><a href="javascript:">孙</a></li>
    <li><a href="javascript:">李</a></li>
  </ul>
</div>

/** 说明：
 * 目前通过ul外层div自定义属性“data-status”控制其是否显示 
 */
(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    // input框失去焦点，隐藏下拉框
    $(".search-list").attr("data-status", "hide");
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").click(function(){
    console.log("执行");
    $("input").val($(this).text());
  });
})(jQuery);

When executing the above code, a problem will occur, and a certain value in the drop-down box cannot be correctly obtained.

Reason: Since JavaScript is single-threaded, only one event can be processed at the same time. From the above example 3, we can know that "blur takes precedence over click execution". In this example, because the blur handler will hide the corresponding drop-down box display area, its subsequent click event will not be executed. The above console information will not be output.

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

(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    setTimeout(function(){
      // input框失去焦点，隐藏下拉框
      $(".search-list").attr("data-status", "hide");
    }, 300);
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").click(function(){
    console.log("执行");
    $("input").val($(this).text());
  });
})(jQuery);

3. Use mousedown to give priority to execution

Example 4: Change the click event in Example 3 to mousedown

<input type="text" id="ipt">
<input type="button" id="btn" value="点我">
<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>
// 输出结果：
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 to occur.
(2) The mouseup event is different from the click event. The mouseup event only requires relaxing the button. This event is fired when the mouse button is released when the mouse pointer is over the element.

Supplement: mousedown, mouseup, click

<input type="button" id="btn" value="点我">
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");
});
输出结果：
my button mousedown
my button mouseup
my button click

So, the execution order is:

mousedown > ;> mouseup >> click

Solution 2: Change the click event to mousedown so that it takes precedence over the blur event

(function($){
  $("input").focus(function(){
    // input框获取焦点，展示下拉框
    $(".search-list").attr("data-status", "show");
  }).blur(function(){
    // input框失去焦点，隐藏下拉框
    $(".search-list").attr("data-status", "hide");
  });
  // 选择对应选项，并赋值给input框
  $(".search-list li a").mousedown(function(){
    $("input").val($(this).text());
  });
})(jQuery);

Thank you for reading, I hope it can help you, thank you for your support of this site!

For more articles related to Javascript blur and click conflict resolution, please pay attention to the PHP Chinese website!