제목 그대로 마우스 우클릭을 금지 시켜주는 스크립트이다.

이 스크립트를 쓰면 오른쪽 클릭 뿐만 아니라, 드래그 또한 작동되지 않는다.

나는 업무 중, 특히 이미지가 많은 이벤트 페이지들을 작업할때

유용하게 쓰고있는 코드라서 공유해본다.

$(document).ready(function(){
 $(document).bind("contextmenu", function(e) {
  return false;
 });
});
$(document).bind('selectstart',function() {return false;}); 
$(document).bind('dragstart',function(){return false;}); 

내 스킨의 네비게이션바를 보면

대강 이런식으로 아래와 같이 짜여져있다.

<ul class="category_list">
    <li>
      	<a class="link_item">대주제</a>
        <ul class="sub_category_list">
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
        </ul>
    </li>
</ul>

여기서 나는 대주제를 클릭했을시

전체목록의 페이지로 이동하는 것을 막고 싶어서,

그냥 a태그를 빼버리려고 했다.

그런데

티스토리에서 네비게이션 부분은 <nav>태그 안에

• 분류 전체보기 (52)
  • 공부 (19)
    • HTML + CSS (2)
    • JavaScript + jQuery (3)
    • UX UI Design (2)
    • Vue.js (9)
    • Computer Science (1)
    • 그 외 (2)
  • 게임 (33)
    • 메이플스토리 (15)
    • 심즈4 (5)
    • 오버워치 (5)
    • 동물의숲 (6)
    • 호그와트 레거시 (1)
    • 스택랜드 (1)
    • 젤다의전설:야생의숨결 (0)
    • 원신 (0)

디테일한 부분은 html 수정이 어렵다는 것을 알게되었다.

따라서 css로 수정을 할 수 밖에 없었는데,

이럴 때 유용하게 쓸 수 있는 css코드가 바로

pointer-events: none; 으로,

 a(앵커)태그를 무효화 시켜서 클릭 기능을 비활성화 시켜준다.

이 css를 적용시키면 href 속성이 부여된 a태그도 클릭이 되지 않는다.

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events에는 여러가지가 있는데,

여기서 auto와 none 그리고 global values를 제외한 나머지들은

visibility 태그 등이 사용된 SVG에서만 쓸 수 있으니 크게 신경 쓰지 않아도 될 것 같다.

회사 업무 중 버그를 잡기위해 작성한 코드가 유용하게 쓰일 수 있을 것 같아 메모해둔다.

회사 커뮤니티 게시판의 왼쪽에 붙어있는 네비가

스크롤의 움직임에 따라서 위아래로 따라 움직이는데,

특정 카테고리에서는 목록의 개수가 적어서 본문이 짧다보니

스크롤을 가장 아래로 내릴 시 네비가 하단 푸터 밖으로 삐져나가버리는 버그가 있었다.

간단히 푸터 또는 본문의 마진으로 해결해보려했지만,

확장된 마진만큼 스크롤이 같이 따라와서 소용이 없었다.

결국 스크립트로 수정을 했는데,

아래의 아주 간단하고 짧은 코드만으로 완벽하게 버그를 잡았다.

$(window).scroll(function(){
    $("#yourDiv").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

position: fixed;가 먹혀있는 div를 #yourDiv에 부여하고,

내가 -250로 적어둔 곳에 알맞은 숫자를 적으면 된다. 

윗 코드에서는 -250px로, 기존에 스크롤을 따라 내려가던 지점에서

-250px만큼 윗 부분까지만 따라오도록 지정한 것이다.

이렇게 코드를 작성하면, 

위에서 부터 몇 px인지가 아니라 아래에서부터 지정을 했기 때문에

게시글 수가 20개에서 늘어나서 50개가 되던 100개가 되던 상관없이,

스크롤이 늘어나더라도 여전히 내가 원하는 지점까지 오게 할 수가 있다.