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


91

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

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

});

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


프로그램은 어떻게 프로그래밍 방식으로 이벤트를 발생합니까?
클레이튼

5
케이스를 구별해야하는 이유는 무엇입니까?
Damien_The_Unbeliever

@Clayton : $x.click()또는 $x.trigger('click').
뮤 너무 짧은

이미지를 자동으로 스크롤하는 이미지 슬라이더가있는 상황이 있었는데 이미지와 관련된 올바른 탐색 항목을 클릭하도록 트리거했습니다. 문제는 사용자가 탐색을 클릭하면 자동 회전이 중지되어야한다는 것입니다.
Kasapo 2012 년

2
이것은 최신 파이어 폭스, 크롬 및 IE9에서 작동합니다. 투표율이 가장 높은 아래 답변을 수락하지 않으시겠습니까 ?? @kevino
오지

답변:


119

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


4
정말 대단합니다. "jQuery 트리거 이벤트에는 마우스 위치 정보가 없을 수도 있습니다."라고 생각했습니다. w00t!
Kasapo 2012 년

2
이것은 createEvent를 지원하는 브라우저에서 무효화 될 수 있습니다. jsfiddle.net/UtzND/26
조 Enzminger

2
@JoeEnzminger 예, 그런데 왜 자신의 스크립트를 패배 시키겠습니까 ...?
OZZIE

3
클릭 이벤트를 생성하는 타사 스크립트와 사용자가 생성했다는 가정하에 스크립트를 처리하는 스크립트 (실제 클릭)에 대해 걱정하고 있습니다.
Joe Enzminger 2013-10-11

2
@JoeEnzminger : 코드가 브라우저에 있으면 모든 베팅이 해제됩니다. 충분히 영리한 사람이 이길 수없는 방법은 없습니다. 가 있습니까 : 나는 당신이 할 수있는 최선의 사물의 무리를 확인 생각 originalEvent? 옳은 일인가? 어디에 좌표가 있습니까? 좌표가 일치합니까? 내부에 좌표가 #foo있습니까? ...
mu가 너무 짧습니다.

44

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

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

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

3
나는이 함께 볼 수있는 유일한 문제는 정상적인 클릭과 구별 할 수 있다는 것입니다 $x.click().click()발신자가 명시 적으로 그것을 날조하고 있다는 당신에게있다. 이것은 Kevin Owocki가 무엇을하고 있는지에 따라 문제가 될 수도 있고 아닐 수도 있습니다.
뮤 너무 짧은

1
(? 사용자) : @mu 꽤 "보통"클릭 사이의 차이를 이해하지 않으며 $x.click()( "정상"있을 수 있습니다 사용자가 클릭에 대한,)를 이벤트 핸들러 인
Shikiryu

1
차이점은 하나는 사용자에게서 나오고 다른 하나는 소프트웨어에서 나온다는 것입니다. 가짜 클릭은 플러그인 또는 추가 인수를 추가하기 위해 수정할 수없는 다른 코드에서 발생할 수 있습니다. 나는 당신의 해결책을 비판하는 것이 아니라 몇 가지 가능한 구멍에 주목합니다.
뮤 너무 짧은

mu가 정확하고 모든 상황에서 작동하지는 않지만 정확히 제가 찾고 있던 것이 었습니다. 감사합니다! var와 같은 추가 매개 변수를 전달할 수 있다는 사실은 몰랐지만 일부 "실제"클릭을 프로그래밍 방식으로 처리하는 복잡한 UI에서 "실제"클릭을 테스트하는 데 필요했습니다. 매우 유용한 솔루션에 감사드립니다!
Phil

9

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

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

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

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

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

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


2
항상 작동하지는 않습니다. 예 를 들어 진정한 이벤트에 select대해 e.which==undefined균등을 줄 것 입니다.
JNF

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>


4

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

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


좋은 지적. 그래도 100 % 견고하다고는 생각하지 않습니다. isTrusted지원 여부와 쓰기 불가능 여부를 확인하려면 몇 가지 테스트를 혼합해야합니다 . 진짜 대답은 이 질문 뒤에 있는 이유에 달려 있다고 생각 하며 우리는 그 이유를 결코 알지 못했습니다.
MU이 너무 짧

@mu, 나는 비슷하지만 더 일반적인 질문을 한 후에이 질문에 왔습니다. 내 "이유"사례는 사용자가 페이지에서 직접 긍정 조치를 취한 경우에만 조치 (작지만 금융 거래)를 수행하고 있는지 확인하고 싶습니다.
Joe Enzminger 2012 년

1

Vanila js 솔루션 :

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

-1

, 지적 토론에 참여하는 필터에 나를 위해 일한 코드 않을 .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
    }
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.