Skill/HTML

HTML - 드래그 방지, 마우스 오른쪽 클릭 방지, 블록 선택 방지

2023. 12. 1.
목차
728x90
반응형

닌니디자인 HTML 썸네일

 

드래그방지

body 태그에 인라인으로 ondragstart 코드를 입력해서 간단하고 직접적으로 웹페이지 전체에 드래그를 방지할 수 있다. 사용자가 드래그를 시작할때 return false를 반환하여 기본 동작을 막는다.

 

ondragstart

사용자가 요소나 텍스트 선택을 드래그하기 시작할 때 실행된다.

<body ondragstart='return false'></body>

 

 

마우스 오른쪽 클릭방지

주로 보안 목적이나 웹 페이지의 콘텐츠를 보호하기 위해 사용된다. 하지만 주의할 점은 이 방법이 모든 사용자의 작업 흐름을 방해할 수 있으며, 웹 페이지에 필요한 기능이 막힐 수 있다. 사용자 경험을 고려하여 적절히 적용해야 한다.

 

oncontextmenu

사용자가 요소를 마우스 오른쪽 버튼으로 클릭하여 상황에 맞는 메뉴를 열 때 속성이 실행된다.

<body oncontextmenu='return false'></body>

 

 

블록 선택 방지

텍스트를 선택하고 복사하여 의도치 않은 동작이 발생할 수 있는 상황을 방지하기 위해 사용될 수 있다. 특히 사용자가 특정한 기능을 수행하도록 유도하거나 웹 페이지의 상호작용을 제어하는 데 도움이 된다.

 

onselectstart

요소에서 일부 텍스트를 선택한 후에 속성이 실행된다.

<body onselectstart='return false'></body>

 

 

예시

<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>

<!-- 내용 -->

</body>

 

 


 

domain_verification Source
 

HTML Attributes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

728x90
반응형
카테고리 다른글 더보기