JQuery event.preventDefault() 용도
2020. 8. 12. 22:47ㆍJavaScript/JQuery
728x90
preventDefault() 메소드는 취소가능한 이벤트를 취소한다. 이는 그 이벤트의 디폴트 액션이 발생하지 않음을 의미한다.
예를 들어, form에서 submit button을 눌러도 event.preventDefault()와 함께라면 submit 액션은 일어나지 않는다.
또다른 예로, 링크를 클릭해도 event.preventDefault()를 사용하면 URL로 이동하지 않는다.
event.preventDefault() 대신에 return false를 사용해도 같은 효과가 있다.
모든 이벤트가 취소가능한 이벤트인 것은 아님을 명심하자. cancelable 프로퍼티를 이용해 이벤트가 취소 가능한지 아닌지를 확인할 수 있다.
또, preventDefault() 메소드는 DOM에 걸쳐서 발생하는 further propagation of an event를 방지하지 않는다. 이를 위해서는 stopPropagation() 메소드를 사용하여라. (stopPropagation은 이벤트가 상위 엘리먼트로 전달되는 것을 방지한다.)
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<html>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://domain4.com">Item #4</a></li>
<li><a>test</a></li>
</ul>
</div>
</body>
</html>
<script>
$( "#list a" ).on( "click", function( event ) {
// event.preventDefault();
console.log( $( this ).text() );
return false;
});
</script>728x90
반응형
'JavaScript > JQuery' 카테고리의 다른 글
| PHP ajax force_download only shows in browser (0) | 2021.01.13 |
|---|---|
| jquery append, after 차이 (0) | 2020.08.31 |
| event binding on dynamically created elements (0) | 2020.08.12 |
| jquery remove duplicate elements (0) | 2020.08.11 |
| JQuery .show() vs .css('display', 'block) (0) | 2020.07.13 |