728x90
<a>요소에 click 이나 dbclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생한다.
이문제를 해결하려면 <a>요소의 기본 이벤트를 차단해야한다.
<form>요소의 제출버튼(submit)도 action에 등록된 주소로 이동시키는 문제가 발생한다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 이벤트 </title> <script src="js/jquery.js"></script> <script> $(function( ) { $(".btn1").on("click", function(e){ e.preventDefault( ); //<a>요소에 링크된 페이지로 이동하는 기본 이벤트를 차단한다. $(".txt1") .css({"background-color":"#ff0"}); }); $(".btn2").on("click", function(e){ $(".txt2") .css({"background-color":"#0ff"}); }); $(".btn3").on("dblclick", function(){ $(".txt3") .css({"background-color":"#0f0"}); }); }); </script> </head> <body> <p><a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a></p> <p class="txt1">내용1</p> <p><a href="http://www.easyspub.co.kr/" class="btn2">버튼2</a></p> <p class="txt2">내용2</p> <p><button class="btn3">버튼3</button></p> <p class="txt3">내용3</p> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| mouseeter() / mouseleave()메서드 (0) | 2021.08.23 |
|---|---|
| mouseover() / mouseout() / hover() (0) | 2021.08.22 |
| 마우스 이벤트 - click() / dbclick() 메서드 (0) | 2021.08.22 |
| 로딩 이벤트 - ready() / load() 메서드 (0) | 2021.08.22 |
| 이벤트 제거 - off() (0) | 2021.08.22 |
