ÀÚ¹Ù½ºÅ©¸³Æ® event.stopPropagation(), event.preventDefault ()
ÀÚ¹Ù½ºÅ©¸³Æ®(Javascript)¿¡¼ À̺¥Æ® ¹öºí¸µ / À̺¥Æ® ĸó¸µÀ» ¸·±âÀ§Çؼ ¾Æ·¡¿Í °°Àº Äڵ带 »ç¿ëÇÕ´Ï´Ù.
event.stopPropagation(), event.preventDefault ()
ÀÌ µÎ°¡Áö À̺¥Æ®ÀÇ Â÷ÀÌ´Â »ç¿ëÀÚ°¡ ¸¸µç À̺¥Æ®¸¦ ¸·´À³Ä & ±âº» À̺¥Æ®¸¦ ¸·´À³Ä Â÷ÀÌÀε¥ ÀÚ¼¼ÇÑ ³»¿ëÀº ¾Æ·¡ ¼Ò½º¸¦ º¸°í ¼³¸íÇÏ°Ú½À´Ï´Ù.
<a href = "http://google.com"> <div id="blockArea"> <img src="logo.png" id="logo" alt="logo"></img> </div> </a> <script> document.getElementById("blockArea").onclick = function(){ alert("block click"); }); document.getElementById("logo").onclick = function(){ alert("logo click"); }); </script>
À§¿Í °°Àº ¸¶Å©¾÷ űװ¡ ÀÖ´Ù°í °¡Á¤Çҽÿ¡
À̹ÌÁö¸¦ Ŭ¸¯ÇÏ¸é ¾Æ·¡¿Í °°Àº ¼ø¼·Î À̺¥Æ®°¡¹ß»ýÇÕ´Ï´Ù.
alert("logo click") -> alert("block click") -> http://google.com À¸·Î À̵¿
À§ ¸¶Å©¾÷¿¡¼ ¾Æ·¡¿Í °°ÀÌ stopPropagation(); ¸¦ »ç¿ëÇϸé
<a href = "http://google.com"> <div id="blockArea"> <img src="logo.png" id="logo" alt="logo"></img> </div> </a> <script> document.getElementById("blockArea").onclick = function(){ alert("block click"); }); document.getElementById("logo").onclick = function(e){ e.stopPropagation(); alert("logo click"); }); </script>
»ç¿ëÀÚÀÇ ¾×¼Ç¿¡ ÀÇÇÑ À̺¥Æ®°¡ ¸·¾ÆÁö¹Ç·Î alert("block click") À̺¥Æ®¸¦ ¸·À» ¼ö ÀÖ´Ù. ÇÏÁö¸¸ ±âº»À̺¥Æ®ÀÎ a href="http://google.com" À¸·ÎÀÇ À̵¿Àº ¸·À» ¼ö ¾ø½À´Ï´Ù.
¹Ý´ë·Î preventDefault(); ¸¦ »ç¿ëÇÏ¸é ºê¶ó¿ìÀúÀÇ ±âº» À̺¥Æ®°¡ ¹«È¿È µÇ¹Ç·Î
a href ű×ÀÇ ¸µÅ©°¡ ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù. ÇÏÁö¸¸ »ç¿ëÀÚ°¡ Á¤ÀÇÇÑ À̺¥Æ® alert("logo click") -> alert("block click") ´Â ¹ß»ýÇÕ´Ï´Ù.
¸¸¾à µÑ´Ù ¸·°í ½Í´Ù¸é stopPropagation(); / preventDefault(); ¸¦ µÑ´Ù ÀÌ¿ëÇÏ¸é µË´Ï´Ù.
Ãâó: http://dotweb.tistory.com/category/ÇÁ·Î±×·¡¹Ö/JavaScript Web App [Àý´ë·Î °í°³¸¦ ¶³±¸Áö ¸»¶ó. °í°³¸¦ Ä¡Äѵé°í ¼¼»óÀ» ¶È¹Ù·Î ¹Ù¶óº¸¶ó.]