[jquery] jQuery에서 프로그래밍 방식과 사용자 클릭을 어떻게 구분할 수 있습니까?

Question 1

클릭 핸들러가 정의되어 있다고 가정합니다.

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

});

함수 핸들러 내에서 이벤트가 프로그래밍 방식으로 시작되었는지 또는 사용자에 의해 발생했는지 어떻게 알 수 있습니까?

Question 2

이벤트 객체를 볼 수 있습니다 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/

Question 3

jQuery 트리거 매뉴얼에 명시된대로 추가 매개 변수를 사용할 수 있습니다 .

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

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

Question 4

이미 답변 된 또 다른 질문이 있습니다.

click ()이 마우스 클릭인지 또는 일부 코드에 의해 트리거되는지 감지하는 방법은 무엇입니까?

which이벤트 객체 의 속성을 사용 합니다. undefined코드 트리거 이벤트 용 이어야 합니다.

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

JsFiddle 예- http://jsfiddle.net/interdream/frw8j/

도움이 되었기를 바랍니다.

Question 5

위의 모든 솔루션을 시도했지만 내 경우에는 아무것도 작동하지 않았습니다. 아래 솔루션이 저에게 효과적이었습니다. 그것이 당신에게도 도움이되기를 바랍니다.

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

스 니펫 확장

Question 6

DOM 레벨 3은 event.isTrusted를 지정합니다. 이것은 현재 IE9 +와 Firefox에서만 지원됩니다 (내 테스트를 기반으로합니다. 철저하게 조사하지는 않았지만) 일부 브라우저에서 재정의 될 수 있으며 실제로 100 % 신뢰할 준비가되지 않았을 수도 있습니다 (불행히도).

이것은 IE와 Firefox에서 작동하는 @mu의 바이올린의 수정 된 버전입니다.

Question 7

Vanila js 솔루션 :

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

Question 8

, 지적 토론에 참여하는 필터에 나를 위해 일한 코드 않을 .click()및 .trigger('click')IS-을

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