본문 바로가기
Front-end/JQuery

[jQuery] e.preventDefault() 의미

by 꼬바리 2022. 3. 3.
<body>

    <div id ="wrap">
        <ul class = "btns">
        <li><a class="on" href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

    <div class = "obj">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
    </div>

    </div>

</body>

--------------------------------------------

$(function(){

    $(".btns li").on("click",function(e){
        
        e.preventDefault();
        var i = $(this).index();
        
        //alert(i);
        $(".btns li a").removeClass("on");
        $(".btns li").eq(i).children("a").addClass("on");
    });

});

 

e.preventDefault();

 

- 이벤트의 기본기능을 막는 것으로 생각하면 된다.

위 소스를 예로 들면 클릭했을때 href로 설정되어있는 주소로 바로 이동하는 것이 아니라

e.preventDefault(); 로 우선 이벤트를 멈춘 후 js의 소스의 기능을 먼저 따른다.

 

 

 

728x90

댓글