Lösung zur Lösung von Javascript-Unschärfe- und Klickkonflikten

Den Konflikt zwischen Unschärfe und Klick lösen

Vorwort:

In der Entwicklung stoßen wir häufig auf Konflikte zwischen Unschärfe und Klick. Im Folgenden werden die bei der Entwicklung häufig auftretenden „Dropdown-Box“-Probleme beschrieben und zwei Lösungen bereitgestellt.

1. Kurze Beschreibung der Unschärfe- und Klickereignisse

Unschärfeereignis: Das Unschärfeereignis wird ausgelöst, wenn das Element den Fokus verliert. Es handelt sich um ein Formularereignis. Unschärfe- und Fokusereignisse werden nicht angezeigt Formveranstaltungen werden Can.

Klickereignis: Ein Klickereignis wird ausgelöst, wenn auf ein Element geklickt wird. Alle Elemente verfügen über dieses Ereignis, was zu Blasenbildung führt.

Beispiel 1: Das Unschärfeereignis ist ein Formularereignis

<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

Beispiel 2: Das Klickereignis kann Blasen bilden

<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

Beispiel 3: Ein Klick auf ein Element führt dazu, dass das vorherige Element den Fokus verliert und das Unschärfeereignis Vorrang vor dem Klickereignis hat

<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. Die Unschärfe- und Klickereignisse des Dropdown-Felds führen dazu, dass Werte normalerweise nicht ausgewählt werden können.

In der tatsächlichen Entwicklung stoßen wir häufig auf ein Dropdown-Feld. Klicken Sie auf andere Elemente, um das Listenfeld auszublenden. Klicken Sie auf das Unterelement des Dropdown-Felds, um es auszublenden. Dies wird zu Konfliktproblemen führen.

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

Beim Ausführen des obigen Codes tritt ein Problem auf und ein bestimmter Wert im Dropdown-Feld kann nicht korrekt abgerufen werden.

Grund: Da JavaScript Single-Threaded ist, kann es jeweils nur ein Ereignis verarbeiten. Aus dem obigen Beispiel 3 können wir erkennen, dass „Unschärfe Vorrang vor der Klickausführung hat“. Da in diesem Beispiel der Unschärfe-Handler den entsprechenden Anzeigebereich des Dropdown-Felds ausblendet, wird sein nachfolgendes Klickereignis nicht ausgeführt. Die oben genannten Konsoleninformationen werden nicht ausgegeben.

Lösung 1: Verzögern Sie das Unschärfeereignis und lassen Sie es zuerst ausführen.

(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. Verwenden Sie Mousedown, um ihm Priorität zu geben

Beispiel 4: Ändern Sie das Klickereignis in Beispiel 3 in 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-Ereignis: Wenn der Mauszeiger über das Element bewegt und die Maustaste gedrückt wird, tritt das Mousedown-Ereignis auf.

Mouseup-Ereignis: Das Mouseup-Ereignis tritt auf, wenn die Maustaste auf einem Element losgelassen wird.

Hinweis:

(1) Das Mousedown-Ereignis unterscheidet sich vom Click-Ereignis. Das Mousedown-Ereignis erfordert nur das Drücken der Taste und muss nicht losgelassen werden auftreten.
(2) Das Mouseup-Ereignis unterscheidet sich vom Click-Ereignis. Das Mouseup-Ereignis erfordert nur das Entspannen der Schaltfläche. Dieses Ereignis wird ausgelöst, wenn die Maustaste losgelassen wird, wenn sich der Mauszeiger über dem Element befindet.

Ergänzung: Mousedown, Mouseup, Klick

<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

Die Ausführungsreihenfolge lautet also:

MouseDown >> MouseUp >> Click

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

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

Weitere Artikel zur Lösung von Javascript-Unschärfen und Klickkonflikten finden Sie auf der chinesischen PHP-Website!