Sự kiện nhấp vào hộp kiểm bị gián đoạn để chạy mã, nhưng $ .trigger ('lần nhấp') sẽ chỉ được nhận dạng trong Chrome chứ không phải Firefox. Tại sao?

Question

Tôi có một lược đồ phức tạp để làm gián đoạn sự kiện nhấp chuột, vì vậy tôi có thể chạy một số mã javascript/jQuery trước khi sự kiện nhấp được hoàn thành (ví dụ: hộp được chọn).

Nhưng, tôi đã nhận thấy một số hành vi khác nhau khi áp dụng mã trong Chrome (trình duyệt cơ sở của tôi) và Firefox (được sử dụng bởi một nhóm nhỏ người dùng của tôi).

Trong fiddle example, chuỗi các sự kiện này hoạt động tốt trong Chrome, nhưng nếu bạn thử tương tự trong firefox, chương trình .trigger('click') không kích hoạt trình xử lý sự kiện. Tại sao? Tôi đã googled nó và có lẽ một cái gì đó để làm với phương pháp $.trigger()?

Mã của tôi:

HTML:

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

<hr> 

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

<hr> 

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

JS (sử dụng hộp thoại 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>

Cập nhật: tôi đơn giản hóa mã của tôi để th e yếu tố trần và tôi có thể chứng minh hành vi cụ thể để tung ra các hộp thoại (hoặc cảnh báo hoặc bất kỳ phương thức), mà phá vỡ tiếp theo .trigger ('click') phương pháp trong firefox. simplified example

Answer 1

Bạn có thực sự cần vô hiệu hóa hộp kiểm không?
Khi bạn đóng phương thức, phải mất một chút thời gian để thay đổi thuộc tính disabled trở về false (trong Firefox). Vì vậy, chúng tôi cần đợi cho đến khi hộp kiểm được bật lại. Nếu không, trình kích hoạt 'nhấp chuột' trên hộp kiểm đã tắt sẽ không có kết quả.
Nhìn vào đoạn mã, tôi đã thiết lập một thời gian chờ trên cò súng và nó hoạt động:

$('#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>

Nhưng nó có thể được giải quyết một cách khác nhau.