Question

I find it hard to explain, so please request more info if you need it.

I have a div like so:

<div id="clickable">
  <p>Some content</p>
  <a href="google.com" class="link">Google</a>
  <a href="yahoo.com">Yahoo</a>
</div>

I want the div to be clickable, and link to the href of an attribute with class ‘link’. This part I have done:

  $('#clickable').on 'click', (ev) ->
    window.location = $(this).find('.link').attr('href')
    return false

But, what should happen is if a user clicks a link within the div, that links location takes precedence. So, in the above example, if you click yahoo it will direct to yahoo. At the moment, it forces google.

Answer 1

The call to update window.location and subsequent return false (stopping the click’s propagation) is happening regardless of the normal behaviour of a link.

Try this:

$('#clickable').on('click', (ev) ->
  unless $(ev.target).is('a')
    window.location = $('.link', @).attr('href') 
    false
)