Solution de résolution de conflits Javascript flou et clic

Résoudre le conflit entre flou et clic

Avant-propos :

En développement, nous rencontrons souvent des conflits entre flou et clic. Ce qui suit décrit les problèmes de « liste déroulante » couramment rencontrés en développement et propose deux solutions.

1. Brève description des événements de flou et de clic

Événement de flou : L'événement de flou est déclenché lorsque l'élément perd le focus. Il s'agit d'un événement de formulaire, les événements de flou et de focus ne bouillonnent pas, les autres ; les événements de forme seront Can.

événement click : un événement click est déclenché lorsqu'un élément est cliqué ; tous les éléments ont cet événement, ce qui provoquera un bouillonnement.

Exemple 1 : L'événement flou est un événement de formulaire

<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

Exemple 2 : L'événement clic peut faire des bulles

<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

Exemple 3 : Cliquer sur un élément fait perdre le focus à l'élément précédent, et l'événement flou prend priorité sur l'événement clic

<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. Les événements de flou et de clic de la liste déroulante sont en conflit, entraînant l'impossibilité de sélectionner les valeurs normalement

Dans le développement réel, nous rencontrons souvent une liste déroulante. liste déroulante. Cliquez sur les autres éléments pour faire disparaître la liste déroulante ; cliquez sur le sous-élément de la liste déroulante pour le faire disparaître. Cela entraînera des problèmes de conflit.

<!-- 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);

Lors de l'exécution du code ci-dessus, un problème se produira et une certaine valeur dans la liste déroulante ne pourra pas être obtenue correctement.

Raison : Puisque JavaScript est monothread, il ne peut gérer qu'un seul événement à la fois. À partir de l'exemple 3 ci-dessus, nous pouvons savoir que « le flou a priorité sur l'exécution du clic ». Dans cet exemple, étant donné que le gestionnaire de flou masquera la zone d'affichage de la liste déroulante correspondante, son événement de clic ultérieur ne sera pas exécuté. Les informations de console ci-dessus ne seront pas affichées.

Solution 1 : Retardez l'événement de flou et laissez le clic s'exécuter en premier.

(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. Utilisez mousedown pour lui donner la priorité

Exemple 4 : changez l'événement click dans l'exemple 3 en 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

événement mousedown : lorsque le pointeur de la souris se déplace sur l'élément et que le bouton de la souris est enfoncé, l'événement mousedown se produit.

Événement mouseup : L'événement mouseup se produit lorsque le bouton de la souris est relâché sur un élément.

Remarque :

(1) L'événement mousedown est différent de l'événement click L'événement mousedown nécessite uniquement d'appuyer sur la touche et n'a pas besoin d'être relâchée. se produire.
(2) L'événement mouseup est différent de l'événement click L'événement mouseup nécessite uniquement de relâcher le bouton. Cet événement est déclenché lorsque le bouton de la souris est relâché lorsque le pointeur de la souris est sur l'élément.

Supplément : mousedown, mouseup, clic

<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

Donc, l'ordre d'exécution est :

mousedown >> mouseup >> click

Solution 2 : changez l'événement click en mousedown et laissez-le avoir priorité sur l'événement flou

(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);

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'articles liés à la résolution des conflits de flou et de clic Javascript, veuillez faire attention au site Web PHP chinois !