자바 스크립트 이벤트 호출을 가로 채기 (항상 호출되는 이벤트 리스너를 먼저 추가 또는 대체)

Question

다른 리스너가 계속 진행하기 전에 이벤트 리스너가 이벤트 알림을받지 못하도록하는 방법을 찾고 있습니다. .

초기 생각은 해당 이벤트 리스너를 바인드하여 해당 요소에 대한 다른 모든 이벤트 리스너를 트리거해야하는지 여부를 체인의 첫 번째 이벤트 리스너로 결정했습니다. 이 문제를 조사한 결과 가능한 것은 아닌 것 같습니다 (적어도 이벤트 리스너가 요소에 바인딩되어있는 방식을 조합하지 않아도됩니다).

내가 웹 페이지에있는 항목의 목록이 있습니다

은 일부 내용을 제공합니다. 사용자가 이러한 '항목 링크'중 하나를 클릭하면 페이지의 다른 영역에 양식이 채워지고 사용자는 항목의 속성 중 일부를 수정할 수 있습니다. 수정 된 항목의 속성을 유지하려면 사용자가 양식과 관련된 '업데이트'버튼을 클릭해야합니다.

내 목표는 사용자가 '업데이트'를 클릭하지 않고 항목의 속성을 수정했지만 다른 '항목 링크'를 클릭하면 방금 전에 변경 한 항목을 무시해도되는지 확인해야합니다.

나의 시도 솔루션 :

1. 바인딩 true로 자바 스크립트 'hasChanges'필드를 설정하는 모든 양식 요소에 대한 변경 이벤트 리스너.
2. 사용자가 변경 사항을 느슨하게 할 수있는 링크로 식별 할 수있는 클래스를 '항목 링크'에 추가하십시오.
3. jQuery를 사용하여 'hasChanges'가 true 인 경우 확인 팝업을 표시하려면이 클래스가있는 모든 요소에 대해 click 및 keypress 이벤트 리스너를 바인딩하십시오.
4. 변경 사항을 저장하려면 취소를 클릭하여 이벤트 전파를 중지하십시오. 이와

문제는 '항목 링크'요소가 이미 사용자가 항목의 속성을 수정할 수있는 페이지의 섹션을 업데이트 할 (자바) Spring AJAX decoration 클릭 이벤트 리스너를 가지고 있고,이 항상 전에 호출 될 것입니다 확인을 표시하는 이벤트 리스너 사실 나는 AJAX 장식 전에 진행할 확인을 위해 이벤트 리스너를 바인딩하여 페이지의 항목 속성 섹션 섹션이 업데이트되기 전에 확인이 표시되도록 보장 할 수 없다고 생각합니다.

누구에게 의견이 있습니까?

미리 감사드립니다.

업데이트 : 제안 된 솔루션은 true로 'caputre'플래그를 설정

했다. 그래서 이제 '항목 링크'에 이벤트 리스너를 추가 내 코드는 다음과 같습니다

$("." + linkClassName).each(function() 
{ 
    if ($.browser.msie) 
    { 
     this.setCapture(true); 
     this.attachEvent("onclick", _self.linksFunction); 
    } 
    else 
    { 
     this.addEventListener("click", _self.linksFunction, true); 
    } 
}); 

그러나, 로깅 추가 갖는 '항목 링크'의 클릭에 호출 모든 기능 (FF의 콘솔), 내 function 'linksFunction'은 여전히 ​​마지막으로 호출됩니다. 내가 잘못 했니?

감사합니다.

Answer 1

이 true로 설정된 addEventListener을 사용하십시오.

모두 여기에 대해 읽기 : https://developer.mozilla.org/en/DOM/element.addEventListener

업데이트 :

IE의 지원이 필요한 경우, use setCapture.
그것은 마우스 이벤트 만 지원합니다. 그러나 필요한 모든 것을 말할 수 있습니다. 다시

업데이트 :

죄송합니다, 나는 촬영이 문제가 해결되지 때문에 쓸모없는 대답은 사용하기가 너무 빨랐다.

내가 원하는대로하는 유일한 방법은 글로벌 클릭 위임을 사용하는 것입니다. 그렇게하면 모든 클릭 이벤트가 통과하는 단일 지점이 생기므로이를 통해 이벤트를 제어 할 수 있습니다.

이 솔루션에는 몇 가지 단점이 있지만 사용자가 마음에 들지 않을 수 있습니다. 한 가지 분명한 사실은 위임이 버블 링 단계의 마지막 단계를 기반으로하므로 정상적인 이벤트 버블 링을 잊을 수 있다는 것입니다. 또 다른 하나는 익숙하지 않은 방식과 완전히 다른 방식으로 이벤트를 첨부해야한다는 것입니다.

그렇다고해서 생존 할 수 있다면 지난 몇 년 동안 나 자신이 선호했던 클릭 이벤트를 처리하는 환상적인 방법 일 수 있습니다. 결국 전체 페이지 (document.body)에 등록 된 단일 클릭 이벤트 만 발생하고 CSS 선택기에 대한 바인딩/바인딩 해제 및 필요한 경우 수동 트리거링과 관련된 작은 프레임 워크를 빌드합니다.

이 방법의 장점 중 일부는 엘리먼트 자체에 등록하지 않기 때문에 엘리먼트가 존재하기 전에 클릭 이벤트를 등록 할 수 있다는 것입니다. 이는 클라이언트 사이드 템플리트를 사용하여 즉석에서 사이트를 빌드하면 좋습니다. 예.