ใน jQuery ฉันจะทราบได้อย่างไรระหว่างการคลิกแบบเป็นโปรแกรมกับผู้ใช้

สมมติว่าฉันมีตัวจัดการคลิกที่กำหนดไว้:

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

});

ภายในตัวจัดการฟังก์ชันจะบอกได้อย่างไรว่าเหตุการณ์นั้นถูกเริ่มโดยโปรแกรมหรือโดยผู้ใช้

eคุณอาจจะมีลักษณะที่วัตถุเหตุการณ์ ถ้าเหตุการณ์ถูกเรียกโดยการคลิกที่จริงคุณจะมีสิ่งที่ชอบclientX, clientY, pageX, pageYฯลฯ ภายในeและพวกเขาจะหมายเลข; ตัวเลขเหล่านี้เกี่ยวข้องกับตำแหน่งของเมาส์เมื่อมีการเรียกใช้การคลิก แต่อาจจะปรากฏแม้ว่าการคลิกจะเริ่มต้นผ่านแป้นพิมพ์ หากเหตุการณ์ถูกทริกเกอร์$x.click()คุณจะไม่มีค่าตำแหน่งปกติในe. นอกจากนี้คุณยังสามารถดูที่originalEventคุณสมบัติ$x.click()ที่ไม่ควรจะมีหากมีเหตุการณ์มาจาก

อาจจะเป็นดังนี้:

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

และนี่คือแซนด์บ็อกซ์เล็ก ๆ น้อย ๆ ให้เล่น: http://jsfiddle.net/UtzND/

คุณสามารถใช้พารามิเตอร์เพิ่มเติมตามที่ระบุไว้ในคู่มือทริกเกอร์ jQuery :

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

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

มีคำถามอื่นตอบไปแล้ว

จะตรวจสอบได้อย่างไรว่า click () เป็นการคลิกเมาส์หรือถูกเรียกโดยรหัสบางอย่าง?

ใช้whichคุณสมบัติของวัตถุเหตุการณ์ ควรเป็นundefinedเหตุการณ์ที่เรียกใช้รหัส

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

ตัวอย่าง JsFiddle - http://jsfiddle.net/interdream/frw8j/

หวังว่าจะช่วยได้!

ฉันได้ลองวิธีแก้ปัญหาข้างต้นทั้งหมดแล้วไม่มีอะไรได้ผลในกรณีของฉัน โซลูชันด้านล่างใช้ได้ผลสำหรับฉัน หวังว่ามันจะช่วยคุณได้เช่นกัน

$(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 ระดับ 3 ระบุ event.isTrusted ขณะนี้รองรับเฉพาะใน IE9 + และ Firefox เท่านั้น (จากการทดสอบของฉันฉันยังอ่าน (แม้ว่าจะไม่ได้รับการวิจัยอย่างละเอียด) ว่าสามารถแทนที่ได้ในบางเบราว์เซอร์และอาจยังไม่พร้อมที่จะเชื่อถือได้ 100% (น่าเสียดาย)

นี่คือ fiddle ของ @ mu รุ่นแก้ไขที่ใช้งานได้บน IE และ Firefox

โซลูชัน Vanila js:

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

จะไม่เข้าร่วมในการอภิปรายทางปัญญารหัสที่ใช้สำหรับฉันในการกรอง.click()และ.trigger('click')เป็น -

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