공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

모바일웹에서 버튼을 길게 눌렀을때 뜨는 이미지저장 (context menu)막기

serpiko 2013. 10. 13. 23:10

두가지 방법이있다.

 

방법1 : 태그의 속성 사용.

 

<img src="그림 소스" oncontextmenu="return false" style="-webkit-touch-callout:none" />

 

oncontextmenu="return false" 이걸 이용하여 안드로이드 계열에서 저장되는 것 막음
style="-webkit-touch-callout:none" 이걸 이용하여 아이폰 계열에서 저장되는 것 막음

 

이렇게 처리하는것이 보편적임

 

 

방법2 : 자바스크립트 사용.

 

<자바스크립트 제공 메서드>

ie 에서 : event.returnValue = false;

타브라우저에서 : event.preventDefaulr();

 

<제이쿼리 제공 메서드>

preventDefaulr();

 

event.preventDefault()Returns: undefined

 

제이쿼리API원문을 보면 다음과 같다.

 

If this method is called, the default action of the event will not be triggered.

(이 메서드를 호출하는경우, 이벤트의 기본 동작이 트리거되지 않습니다.)

 

다음 예제를 보면 "a 태그"를 클릭했을 때 a태그의 기본동작인 URL을 호출하는 것이 아니라, 트리거된 이벤트 핸들러에 의해

"default click prevented" 메시지가 출력된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
 
<script>
$("a").click(function(event) {
  event.preventDefault();
  $('<div/>')
    .append('default ' + event.type + ' prevented')
    .appendTo('#log');
});
</script>
 
</body>
</html>

 

 결과)

 

 

 

실무)

이 메서드를 모바일에서의 터치이벤트에 적용시키면 이미지가 버튼으로 되어있다면 이미지저장 및 컨텍스트 메뉴를 막을수 있다.

 

코드)

 

$(".leftBtn").on("touchstart",function(e){
  e.preventDefault();
  _this.leftDownHandler();
 }).on("touchend",function(e){
  e.preventDefault();
  _this.leftUpHandler();
 }).on("touchmove",function(e){
  e.preventDefault();
  //_this.rightDownHandler();
})

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

제이쿼리 드래그앤드롭  (0) 2013.10.14
checkbox, radio, text 각 타입 - 체크및 비활성화  (0) 2013.10.13
css 백그라운드 바꾸기  (0) 2013.10.13
.on() - 지금 또는 나중에 이벤트처리 묶음  (0) 2013.10.13
.offset() - 좌표찾기, 좌표셋팅  (0) 2013.10.13
댓글