[    이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기    ]




아주 가끔 a태그를 클릭시 a태그 href 에 지정된 속성으로 이동을 막고, 처리가 필요한 경우에 어떻게하는지에 대한 포스팅입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
   
    <ul>
      <li>
        <a href="국어">국어</a>
      </li>
      <li>
        <a href="영어">영어</a>
      </li>
      <li>
        <a href="수학">수학</a>
      </li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function(){
        $("li a").on("click",function(event){ // a태그 클릭시 작동
          // 클릭된 태그의 본래의 기능을 막음 즉, a태그 본래 기능을 막음
          event.preventDefault();
          var txt = $(this).attr("href"); // href에 입력된 값을 가져옴 즉 클릭된 a의 국어, 영어, 수학 중 하나를 가져옴
 
          alert(txt + "가 클릭됨");
        });
      }); // end of ready()
    </script>
  


+ Recent posts