Trong jQuery, làm cách nào để phân biệt giữa nhấp chuột có lập trình và nhấp chuột của người dùng?

Giả sử tôi đã xác định một trình xử lý nhấp chuột:

$("#foo").click(function(e){

});

Làm cách nào tôi có thể, trong trình xử lý hàm, cho biết sự kiện được kích hoạt theo chương trình hay bởi người dùng?

Bạn có thể nhìn vào đối tượng sự kiện e. Nếu sự kiện này được kích hoạt bởi một nhấp chuột thực tế, bạn sẽ có những thứ như clientX, clientY, pageX, pageYvv bên trong evà họ sẽ có con số; những con số này liên quan đến vị trí chuột khi kích hoạt nhấp chuột nhưng chúng có thể sẽ hiện diện ngay cả khi nhấp chuột được thực hiện thông qua bàn phím. Nếu sự kiện được kích hoạt trước $x.click()đó thì bạn sẽ không có các giá trị vị trí thông thường e. Bạn cũng có thể nhìn vào originalEventtài sản , tài sản đó sẽ không có nếu sự kiện đến từ $x.click().

Có thể như thế này:

$("#foo").click(function(e){
    if(e.hasOwnProperty('originalEvent'))
        // Probably a real click.
    else
        // Probably a fake click.
});

Và đây là một hộp cát nhỏ để chơi với: http://jsfiddle.net/UtzND/

Bạn có thể sử dụng một tham số bổ sung như đã nêu trong hướng dẫn kích hoạt jQuery :

$("#foo").click(function(e, from){
    if (from == null)
        from = 'User';
    // rest of your code
});

$('#foo').trigger('click', ['Trigger']);

Có một câu hỏi khác đã được trả lời.

Làm thế nào để phát hiện một nhấp chuột () là một nhấp chuột hoặc được kích hoạt bởi một số mã?

Sử dụng thuộc whichtính của đối tượng sự kiện. Nó phải undefineddành cho các sự kiện do mã kích hoạt

$("#someElem").click(function(e) {
    if (e.which) {
        // Actually clicked
    } else {
        // Triggered by code
    }
});

Ví dụ về JsFiddle - http://jsfiddle.net/interdream/frw8j/

Hy vọng nó giúp!

Tôi đã thử tất cả các giải pháp trên nhưng không có gì hiệu quả trong trường hợp của tôi. Giải pháp dưới đây đã làm việc cho tôi. Hy vọng nó cũng sẽ giúp bạn.

$(document).ready(function(){
  //calling click event programmatically
    $("#chk1").trigger("click");
});

$(document).on('click','input[type=checkbox]',function(e) {
		if(e.originalEvent.isTrusted==true){
			alert("human click");
		}
		else{
			alert("programmatically click");
		}
    
    });

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>

<input type="checkbox" id="chk1" name="chk1" >Chk1</input>
<input type="checkbox" id="chk2" name="chk2" >Chk2</input>
<input type="checkbox" id="chk3" name="chk3" >Chk3</input>

DOM Mức 3 chỉ định event.isTrusted. Điều này hiện chỉ được hỗ trợ trong IE9 + và Firefox (dựa trên các thử nghiệm của tôi. Tôi cũng đã đọc (mặc dù chưa được nghiên cứu kỹ lưỡng) rằng nó có thể bị ghi đè trong một số trình duyệt và có lẽ chưa sẵn sàng 100% để thực sự đáng tin cậy (thật không may).

Đây là phiên bản sửa đổi của @ mu's fiddle hoạt động trên IE và Firefox.

Giải pháp Vanila js:

document.querySelector('button').addEventListener('click', function (e){
    if(e.isTrusted){
        // real click.
    }else{
        // programmatic click
    }
});

Sẽ không tham gia vào các cuộc thảo luận hữu trí tuệ, các mã mà làm việc cho tôi để lọc .click()và .trigger('click')là-

$(document).on('click touchstart', '#my_target', function(e) {
    if (e.pageX && e.pageY) { // To check if it is not triggered by .click() or .trigger('click')
        //Then code goes here
    }
});