[CSS] 웹뷰에서 롱프레스 시 발생하는 기본 동작들 막기(드래그, 컨텍스트 메뉴)

기본적으로 모바일 웹 환경에서는 롱프레스하면 드래그할 수 있거나, 이미지를 롱프레스하면 별도 컨텍스트 메뉴가 뜨는 등의 동작이 발생하는 것을 확인할 수 있습니다.

웹뷰 개발 시 여러가지 이유로 이런 기본 동작을 막아야 하는 경우가 있는데, css로 간단하게 처리할 수 있습니다.

롱프레스 시 선택되는 드래그 방지

롱프레스 시 선택되어 드래그를 막고 싶은 요소에 user-select: none 을 적용하면 됩니다.

1
2
3

.box {
  user-select: none;
}

1

<p class="box">텍스트</p>

iOS(safari 계열)에서는 -webkit vendor prefix를 붙여서 추가해야 합니다.

1
2
3
4

.box {
  user-select: none;
  -webkit-user-select: none;
}

이미지 롱프레스 시 OS 기본으로 뜨는 컨텍스트 메뉴 막기

모바일 웹에서 이미지를 롱프레스 해 보면, 기본적으로 컨텍스트 메뉴가 표시되는 것을 볼 수 있습니다.

이것을 막으려면 pointer-events: none 을 적용하면 됩니다.

1
2
3

.logo-box {
  pointer-events: none;
}

1
2
3
4
5
6

<div class="logo-box">
  <img class="logo-box" src="./logo.png" />
  <p>
    <a href="https://test.abc.def">링크 바로가기</a>
  </p>
</div>

위 예제는 logo-box 라는 클래스명을 가진 이미지에 한해서 pointer-events: none 을 적용한 것입니다.

만약 위에서 부모 div인 div.logo-box 에 pointer-events: none 을 적용했다면 a 태그의 링크는 누를 수 없게 됩니다. 해당 css는 마우스 클릭이나 터치 등 포인터 관련 이벤트를 모두 막기 때문에, 막을 대상에만 주의해서 적용해야 합니다.

Browser Compatibility

• user-select의 browser compatibility
  • Chrome Android : 18 (Released 2012-06-27) / 54 (Released 2016-10-19, -webkit prefix를 붙이지 않아도 되게끔 수정)
  • Safari iOS : 3.2 (Released 2010-04-03)
• pointer-events의 browser compatibility
  • Chrome Android : 18 (Released 2012-06-27)
  • Safari iOS : 3.2 (Released 2010-04-03)