[Javascript] <a> 태그내에서 <img> 클릭시 다른 링크로 보내기

<a href="test.html">

     <img onclick="imgView('2')">

</a>

 

위의 코드처럼 <a> 태그내에 있는 <img> 태그 클릭시 다른 링크 주소로 보내고 싶을때,

 

가장 쉽게 하면

 

<a href="test.html" onclick="return false;">
  <img src="image.jpg" alt="" onclick="imgView('2')">
</a>
 
<script>
function imgView(no) {
    location.href = "view.html?no=" + no;
}
</script>

 

<a> 태그를 return false 하고, onclick 으로 링크 하면 되는데,

이는 <a> 태그 자체가 동작을 하지 못한다는 단점이 있다.

 

<a href="test.html">
  <img src="image.jpg" alt="" onclick="imgView(event, '2')">
</a>
 
<script>
function imgView(e, no) {
    e.preventDefault();   // a 태그 기본 이동 막기
    location.href = "view.html?no=" + no;
}
</script>

 

 

e.preventDefault() 를 이용하여 기본 동작을 막고 링크시켜주면 되겠다.