jQuery를 이용한 Click Event 검열

Click 이벤트를 검열해서 특정 조건에 만족하면 더는 진행하지 못하도록 할 수도 있습니다. 예를 들어 링크를 클릭할 때 링크 주소가 외부 도메인이라면 이벤트를 종료시켜서 페이지 이동을 막을 수 있습니다. 이벤트를 중지시킬 수 있기 때문에 검열이라는 단어를 사용했는데 어울리는지는 모르겠네요. ^^

예전에는 “A” 태그를 클릭할 때 href 속성값이 현재 서비스 도메인과 같다면 iframe으로 불러오고 다른 경우는 새 창으로 띄우는 것을 해본 적이 있습니다. “A” 태그에 target 속성을 지정하면 된다고 하시겠지만, 운영 중이던 사이트였기 때문에 모든 소스를 변경하지 않는 방법을 찾고 있었던 것입니다.

최근에 이런 작업이 또 있어서 이번에는 jQuery를 사용해서 만들었습니다. 역시나 간단해지더군요.

$(document).click(function(e){
  // 클릭 이벤트 발생시 작업
}).ready(function(){
  // 문서 로딩 후 작업
});

간단하죠?

자 위 코드에 “A”태그를 클릭할 때 현재 도메인과 같은 곳이면 페이지 이동을 현재 페이지에서 하고 다른 도메인이라면 새 창으로 띄우는 간단한 예제를 넣어 보겠습니다.

$(document).click(function(e){
  if ( $(e.target).is('A') && $(e.target).is('[href*="' + document.domain + '"]') ) {
    $(e.target).attr('target','');
  } else {
    $(e.target).attr('target','_blank');
  }
}).ready(function(){
  // 문서 로딩 후 작업
});

위 예제는 이벤트(e)의 대상(target)이 “A”이고 href 속성에 “document.domain”값이 들어 있다면 “A” 태그의 target 속성을 ”로 변경하고 그렇지 않으면 “A” 태그의 target 속성을 ‘_blank’로 변경합니다.

위 작업은 페이지 이동 전에 실행되기 때문에 target 속성값을 변경하는 것만으로도 효과를 발휘하게 됩니다.

jQuery에 one()이라는 함수가 있는데 이걸 사용하면 중복해서 이벤트를 등록해도 하나만 등록 되는 것으로 착각 했습니다. one()은 한번만 실행하는 것이더군요. 따라서 모든 클릭에대해 매번 실행이 되어야 한다면 그냥 click()함수를 사용하는 것이 맞습니다. 그래서 처음 사용한 아래 코드는 올바르지 않습니다.

$(document).one('click', function(e){
Advertisements

Published by: benant

WEB PROGRAMMER. PHP, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

카테고리 Web태그, , 댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중