전체 Div를 클릭 가능하도록 만들기 - jQuery 예제

예를 들어 다음과 같은 상황에서 Div 전체를 클릭 가능하도록 하여 클릭할 경우 지정된 URL로 이동하도록 만들어야 하는 경우가 있습니다.

<div class="clickable" url="http://google.com">
내용
</div>

이 경우 다음과 같은 jQuery 스크립트를 사용할 수 있습니다.

$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
return false;
});
// Source: http://stackoverflow.com

여기에서 return false는 이벤트 버블링(event bubbling)을 방지하기 위한 것이라고 하는데요, return false 대신 event.preventDefault()를 장려하는 분도 있네요. event.preventDefault()와 return false 비교는 여기를 참고해보시기 바랍니다. 다양한 사용자들의 의견을 확인해볼 수 있습니다.

직접 jQuery 스크립트 내에서 링크를 지정해주려는 경우에는 다음과 같은 코드가 가능합니다.

jQuery('.clickable).click(function(){
window.location = 'http://www.google.com';
});