메뉴 건너뛰기

클릭될 아이콘이, 마우스의 움직임으로 인하여 드래그(셀렉트;선택)되는 것을 방지(금지)하는 script 코드

Average Rating:
 0명 참여
Rate this page:
평점 한줄평 글쓴이 작성날짜

script.PNG

 

컨텐츠 위젯의 상단으로 이동시킨 페이지 넘김 버튼의 스크린 샷입니다.

font awesome 을 이용하여 이쁘게 버튼을 표시하였습니다.

font awesome 은 폰트의 특수문자(아이콘)를 표현하는 것이기에 마우스로 쉽게 구역 선택이 됩니다.

크기가 작고 클릭을 연속으로 하는 경우가 잦기에 구역 선택이 되면 신경 쓰입니다.

이런 이유로, 제대로 클릭 아이콘처럼 사용하기 위해서는 아래와 같은 스크립트의 도움이 필요합니다.

 

onmousemove 때문에 약간 이상한 느낌이 들 수 있습니다만 무난하게 사용할 수 있습니다.

 

xe/1sam/js/anti_drag.js   

 

 //document.onmousemove=eventControl; //마우스 오버일 때 문제 발생
 document.onselectstart=eventControl;
 document.ondragstart=eventControl;
 //document.oncontextmenu=eventControl; //오른쪽 마우스 클릭은 필요없음
 
 function eventControl(e) {
   e = e || event;
  var element = (e.target ? e.target : e.srcElement);

  // inupt, textarea 제외 원하는 테그 추가
  if(!(element.nodeName.toLowerCase() == 'input' && element.type && element.type.toLowerCase() == 'text')) {
   if(document.selection) { //ie
    try{document.selection.empty();}
    catch(err) {  }
    e.returnValue = false;
   }
   else {      //ff, opera, safari
    try {
     window.getSelection().removeAllRanges();}
    catch(err) {  }
    e.preventDefault();
   }
  }

  //return false; //어떤 것도 안 먹힐 때는 그냥 강제로 false 리턴함
  }

 

 

 

위의 코드를 XE 레이아웃 편집 모드에서 코드 상단에 아래와 같이 한 줄 추가합니다.

 

<load target="/1sam/js/anti_drag.js" />


 


 

클릭할 아이콘이, 마우스의 움직임으로 인하여 드래그(셀렉트;선택)되는 것을 방지하는 코드입니다.

 

출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=125017

 

제목 날짜
Star Rating 별점 위젯 업데이트 정보   2014.03.09
Bootstrap Menu templetes   file
    9
Font Awesome   file
    9
플레시 메뉴 layout 원본  
    8
태그 목록