이벤트가 사람에 의해 트리거되는지 확인


140

이벤트에 처리기가 첨부되어 있으며 trigger () 메서드가 아닌 사람이 트리거하는 경우에만 실행하고 싶습니다. 차이점을 어떻게 알 수 있습니까?

예를 들어

$('.checkbox').change(function(e){
  if (e.isHuman())
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert

답변:


212

당신은 확인할 수 있습니다 e.originalEvent: 그것이 정의 된 경우 클릭은 인간입니다 :

바이올린 http://jsfiddle.net/Uf8Wv/를보십시오

$('.checkbox').change(function(e){
  if (e.originalEvent !== undefined)
  {
    alert ('human');
  }
});

바이올린에서 내 예 :

<input type='checkbox' id='try' >try
<button id='click'>Click</button>

$("#try").click(function(event) {
    if (event.originalEvent === undefined) {
        alert('not human')
    } else {
        alert(' human');
    }


});

$('#click').click(function(event) {
    $("#try").click();
});

1
@Nicola이 문서는 어디에 있습니까?
Šime Vidas

@Sime 모르겠지만 표준이라고 생각합니다. 여기를보십시오 : api.jquery.com/category/events/event-object
Nicola Peluchetti

@Nicola 알다시피 jQuery입니다. jQuery는이 속성 안에 원래 이벤트 객체를 저장합니다. Btw, 당신이 모른다는 것은 무엇을 의미합니까? 방금 문서에 대한 링크를 제공했습니다:)
Šime Vidas

1
당신도 사용할 수있는 것 같습니다event.isTrigger
avoliva

1
@ Anurag, 나는 지금 같은 문제가 발생했습니다. originalEvent이벤트가에 의해 트리거 될 때 jQuery가 채워지는 것처럼 보이지만 , 어수선하지만 작동 DOM.click()할 수 있습니다 $($("#try")[0]).click();.
Daniel Garrett


7

이 작업을 수행하는 유일한 방법 trigger설명서 에 따라 호출시 추가 매개 변수를 전달하는 것 입니다.

$('.checkbox').change(function(e, isTriggered){
  if (!isTriggered)
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change', [true]); //doesn't alert

예 : http://jsfiddle.net/wG2KY/


1
이벤트 객체의 originalEvent 속성을 확인할 수 있습니다. 이벤트가 클릭에서 발생하지 않으면 정의되지 않음
Nicola Peluchetti


1
어떤 이유로 Zepto의 'click'핸들러를 사용할 때 event.originalEvent가 작동하지 않았습니다 (1을 계속 유지하십시오). 그래서 위의 해결책을 시도했습니다. 매력처럼 일했다.
Larrydx

7

수락 된 답변이 효과가 없었습니다. 6 년이 지났으며 jQuery는 그 이후로 많은 변화를 겪었습니다.

예를 들어 event.originalEvent항상 반환true jQuery 1.9.x객체는 항상 존재하지만 내용이 다릅니다.

최신 버전의 jQuery를 사용하는 사람들은 이것을 시도 할 수 있습니다. Chrome, Edge, IE, Opera, FF에서 작동

if ((event.originalEvent.isTrusted === true && event.originalEvent.isPrimary === undefined) || event.originalEvent.isPrimary === true) {
    //Hey hooman it is you
}

3

현재 대부분의 브라우저는 event.isTrusted를 지원 합니다 .

if (e.isTrusted) {
  /* The event is trusted: event was generated by a user action */
} else {
  /* The event is not trusted */
}

에서 문서 :

isTrusted은 읽기 전용의 속성 Event인터페이스이다 Boolean 하다 사실 이 이벤트는 사용자 동작에 의해 생성 한 때 오류 이벤트가 생성 또는 수정 된 스크립트 또는 통해 전달 될 때 EventTarget.dispatchEvent () .


0

onmousedown을 사용하여 마우스 클릭과 트리거 () 호출을 감지 할 수 있습니다.


다음과 같은 시나리오에서는 작동하지 않을 수 있습니다. 때때로 Tab 키를 사용하여 페이지 요소를 선택할 수 있습니다. 예를 들어,이 방법으로 확인란을 선택한 경우 스페이스 키를 사용하여 확인 / 선택 취소 할 수 있습니다. 또는 아래쪽 화살표 키를 사용하여 drodpdown을 열 수도 있습니다.
Diego Favero

0

마우스 위치를 확인할 수있는 가능성에 대해 생각합니다.

  • 딸깍 하는 소리
  • 마우스 위치 확보
  • 버튼의 좌표를 겹칩니다
  • ...

다음과 같은 시나리오에서는 작동하지 않을 수 있습니다. 때때로 Tab 키를 사용하여 페이지 요소를 선택할 수 있습니다. 예를 들어,이 방법으로 확인란을 선택한 경우 스페이스 키를 사용하여 확인 / 선택 취소 할 수 있습니다. 또는 아래쪽 화살표 키를 사용하여 drodpdown을 열 수도 있습니다.
Diego Favero

0

모든 코드를 제어 할 수있는 경우 $(input).focus()보다 외계인 호출 이 없습니다 setFocus().

전역 변수를 사용하는 것이 올바른 방법입니다.

var globalIsHuman = true;

$('input').on('focus', function (){
    if(globalIsHuman){
        console.log('hello human, come and give me a hug');
    }else{
        console.log('alien, get away, i hate you..');
    }
    globalIsHuman = true;
});

// alien set focus
function setFocus(){
    globalIsHuman = false;
    $('input').focus();
}
// human use mouse, finger, foot... whatever to touch the input

일부 외계인이 여전히 $(input).focus()다른 행성에서 전화 를 원한다면 행운을 빕니다 또는 다른 답변을 확인


이렇게하면 사람들이 전화 setFocus()를 걸지 못하고 사람들이 포커스 이벤트를 트리거하지 못합니다. 전혀 글 setFocus()을 쓰지 않으면 사람들이 전화를 걸지 못하므로 이점이 없습니다. 실제로 사람들은 여전히 ​​전화를 걸어 $('input').focus()통과 할 수 있습니다 .
Rob

와우, 내가 질문에 대한 답변을 한 직후에 누군가가 댓글을
달면

다른 제 3 자 스크립트가없는 닫힌 환경에서 작업하는 경우 완벽한 세상에서 작동합니다. 그러나 대부분의 실제 응용 프로그램은 모든 종류의 플러그인과 스크립트가 추가 된 클라이언트 사이트에 해당합니다. 이것이 도움이 될 수있는 한 가지 방법은 다음과 같이 범위가 지정된 함수에서 코드 (및 해당 함수를 호출해야하는 모든 코드)를 래핑하는 (function(){/*your code here*/})();것입니다 . 이렇게하면 setFocus 함수가 호출되지 않고 부울이 외부 스크립트에 의해 변경되지 않습니다.
Xandor
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.