마우스 이벤트 핸들링 예제에 관한 질문있습니다!

조회수 319회

[4-18]강의 실습 예제에서 실습을 시작하기 전의 코드 상태에서

원숭이를 클릭하면 사라지는 이슈가 있는데요. 생각해봐도 이미지가 사라지는 원인을 모르겠습니다. ㅠ

해당 예제 링크입니다: https://codepen.io/yamoo9/pen/NYgvgG

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    안녕하세요 NeoDahl 님 ^ ㅡ ^

    문의주신 질문에 답변 드려봅니다.

    브라우저 기본 동작

    원숭이를 클릭했을 때 그림이 사라지는 이유는 <a> 요소의 href 속성 값에 해시(#)가 설정 되어, 클릭할 때 마다 Codepen에서 페이지를 새로고침 하기 때문입니다.

    <a href="#" class="link is-monkys">
      <img src="monks-frame-normal.jpg" alt="팔짱 낀 몽키">
    </a>
    

    브라우저 기본 동작 차단

    이는 브라우저의 기본 동작으로 프로그래밍 방식으로 브라우저의 기본 동작을 차단하면 원숭이를 클릭 했을 때 원숭이 그림이 사라지지 않게 만들 수 있습니다.

    브라우저의 기본 동작을 차단하는 방법은 이벤트 핸들러(함수)의 매개 변수로 Event 객체를 받은 후, 전달 받은 Event 객체의 preventDefault() 메서드를 사용하면 기본 동작을 차단할 수 있습니다.

    var monkys = document.querySelector('.link.is-monkys');
    
    // 이벤트 핸들러(함수)의 매개변수로 Event 객체 전달  
    monkys.onclick = function(event) {
    
      // 브라우저 기본 동작 차단
      event.preventDefault();
    
      console.log('원숭이 클릭');
    
    };
    
    • 감사합니다! NeoDahl 2018.7.3 11:55

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.