复选框点击事件会中断以运行代码,但$ .trigger('click')只会在Chrome中识别,而不会在Firefox中识别。为什么?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复选框点击事件会中断以运行代码,但$ .trigger('click')只会在Chrome中识别,而不会在Firefox中识别。为什么?相关的知识,希望对你有一定的参考价值。

我有一个复杂的方案来中断复选框点击事件,所以我可以在点击事件完成之前运行一些javascript / jQuery代码(即选中框)。

但是,在Chrome(我的基础浏览器)和Firefox(由我的一小部分用户使用)中应用代码时,我注意到了一些不同的行为。

在这个小提琴example中,事件序列在Chrome中运行良好,但如果你在firefox中尝试相同,程序化的.trigger('click')不会触发事件监听器。为什么?我用谷歌搜索了它,也许与$.trigger()方法有关?

我的代码:

html

<input type="checkbox" id="foo"> Clicky!

<hr>

<textarea id="bar"></textarea>

<hr>

<textarea id="cons"></textarea>

JS(使用jQueryUI对话框)

$("#dialog").dialog({
  autoOpen: false
});

$("#foo").on('mousedown', function(e) {
  e.preventDefault(); // stop mousedown propagation
  $("#foo").prop('checked', false).prop("disabled", true); // disable checkbox from checking

  if (!$("#foo").is(":checked")) { // if not checked, run script

    // Open a modal while checkbox event is paused
    $("#dialog").dialog('open').dialog({
      title: "Hey! Here is a modal",
      modal: 'true',
      buttons: {
        "OK": function() {
          // run a script while modal running during checkbox pause
          $("#bar").val("checkbox paused, script run");
       
                       // release checkbox disable  &
          // programmatically complete the check
          $("#foo").prop('disabled', false);
          $("#foo")[0].click(); 
          // This click event completes and the click listener fires below in Chrome, but not on firefox? Why oh why?
          $("#dialog").dialog('close');
       
       }
        
      }
    });
  }
});



$("input:checkbox").on("click", function() {
  $("#cons").val("check completed!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="checkbox" id="foo"> Clicky!

<hr>

<textarea id="bar"></textarea>

<hr>

<textarea id="cons"></textarea>

<div id="dialog">
  A modal opens
</div>

Update: I simplified my code to the bare elements and I can demonstrate the behavior is specific to launching the dialog (or alert or any modal), which breaks the subsequent .trigger('click') method in firefox. simplified example
答案

你真的需要禁用复选框吗? 关闭模态时,需要一些时间将disabled属性更改回false(在Firefox中)。所以我们需要等到再次启用该复选框。否则触发器会在禁用的复选框上“点击”而没有结果。 看一下片段,我在触发器上设置了超时,它可以工作:

$('#bar').on('click', function() {
  $("#foo").prop('disabled', true);
  alert("pause"); // alert, modal, dialog all break trigger event
  $("#foo").prop('disabled', false);
  // wait...
  setTimeout(function() {
    $("#foo").trigger('click')
  }, 100);
});

$("input:checkbox").on("change", function() {
  $("#baz").val("check completed!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="foo">
<hr>
<button id="bar">Checker</button>
<hr>
<textarea id="baz"></textarea>

以上是关于复选框点击事件会中断以运行代码,但$ .trigger('click')只会在Chrome中识别,而不会在Firefox中识别。为什么?的主要内容,如果未能解决你的问题,请参考以下文章

如何对项目的复选框和文本以不同的方式处理点击事件? (PyQt/PySide/Qt)

设置检查节点检查事件

easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

Chrome 调试 - 下一次点击事件中断

中断和反转 CAKeyframeAnimation

jQuery中模拟用户操作