Zero Clipboard 사용중 이벤트 중첩으로 인한 문제 해결방법

웹사이트에 있는 특정 정보를 접속자 PC의 클립보드에 복사하게 하려면 어떻게 해야 할까요?

간단한 방법이 Zero Clipboard를 사용하는 것입니다. 자세한 사용방법은 Zero Clipboard의 Wiki 문서를 보시고요. 이번 글에서 이야기 할 내용은 이벤트 중첩에 의한 처리방안입니다.

Zero Clipboard를 이용하여 couponsns.com 에서 제공하는 할인 쿠폰 번호를 사용자가 클릭하면 쿠폰을 사용할 사이트로 이동 시키면서 동시에 쿠폰 번호를 사용자 PC Clipboard에 저장하도록 했는데요. 남의 사이트를 배끼다 보니 이벤트가 중복되는 문제가 발생했습니다. 이상하죠? 똑같이 배겼는데도 원본은 이벤트 중첩이 않되는데 내것만 이벤트가 중첩되서 클릭하면 창이 여러개가 뜨는 문제가 발생하는지 모르겠습니다.

제가 사용한 소스는 다음과 같습니다. 참고로 아래 소스는 정상 작동하는 소스입니다. 브라우저는 IE 6/7/8, Firefox 9.0.1, Opera 11.60, window Safari 5.1.2(7534.52.7), Chrome 16.0.912.63 m 입니다. 모두 정상작동하고 클릭시 새창으로 페이지가 열립니다.

[JavaScript 소스]

<script type="text/javascript">
	var clip = null;

	$(function(){

		function init(self){

			ZeroClipboard.setMoviePath('<?= $this_skin ?>/js/ZeroClipboard.swf');

			// setup single ZeroClipboard object for all our elements
			clip = new ZeroClipboard.Client();
			clip.setHandCursor( true );

			var $self = $(self);

			// set the clip text to our innerHTML
			clip.setText( self.innerHTML );

			// reposition the movie over our element
			// or create it if this is the first time
			if (clip.div) {
				clip.receiveEvent('mouseout', null);
				clip.reposition(self);
			}
			else clip.glue(self);

			// gotta force these events due to the Flash movie
			// moving all around.  This insures the CSS effects
			// are properly updated.
			clip.receiveEvent('mouseover', null );
			clip.setCSSEffects( true );

			clip.addEventListener( 'mouseOver', function(client) {
				$('div.box_coupon_code_notice').remove();
				var self = client.domElement;
				$(self).before('<div class="box_coupon_code_notice">Click to copy and use coupon</div>');
			});

			clip.addEventListener( 'mouseOut', function(client) {
				$('div.box_coupon_code_notice').remove('');
				clip.destroy();
			});

			clip.addEventListener('complete', function(client) {
				var self = client.domElement;
				$(self).siblings('.box_coupon_code_notice').text('Coupon code copied. Use at checkout!');
				var agt = navigator.userAgent.toLowerCase();
				if (agt.indexOf("safari") != -1 && agt.indexOf("chrome") == -1){
					$self.click(function(){
						$self.unbind('click');
						window.open(self.lang,"_blank");
					});
					$self.click();
				}else{
					window.open(self.lang,"_blank");
				}
			});

		}

		// assign a common mouseover function for all elements using jQuery
		$('div.box_coupon_code').mouseover( function() {
			init(this);
		});

	});
</script>

[HTML 소스]

<div class="box_coupon_code" lang="./skin_board/k_build_home/interstitial.php?voucherid=17236">BRADSDEALS613</div>

암튼, 문제는 쿠폰코드가 있는 영역에 마우스 오버가 되면 Zero Clipboard가 실행되어 설정되도록 한것이 문제이긴 한데 다른 예제를 찾기도 귀찮고 다시 처음부터 만들자니 그것도 귀찮아서 addEventListner를 날려 버릴 생각을 했습니다. 그런데 Wiki 문서 어디를 찾아봐도 addEventListner를 통해 설정한 이벤트 함수들을 날려 버리는 방법을 못찾아서 ZeroClipboard 자채를 날리는 메소드가 있기에 그것을 사용하도록 했습니다. 위 자바스크립트 소스 중간을 보면 “clip.destroy();”라는 부분이 있는데 이 메소드가 바로 ZeroClipboard 객체를 날려버리는 메소드입니다.

쿠폰코드에 마우스 오버시 ZeroClipboard 객체를 생성하고 마우스 아웃시 ZeroClipboard 객체를 날려 버리니 아주 확실하게 정상 작동합니다. 좀 무식한 방법이지만 효과는 만점입니다. 비슷한 문제로 고민하시는 분들 그리고 일단 급하게 처방을 내려야 하시는 분들에게 추천합니다. 시간 많은 분들은 좀더 효과적이고 객체를 남기고 대상만 바꿀 수 있고 이벤트 중첩도 않되는 방법이 있으면 알려 주세요. ^^;;

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 - 독립형 쇼핑몰 솔루션.

Categories Web태그, , , , 댓글 남기기

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중