3852

Coffeescript: how to link div, but override link if child links are clicked

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">

Some content

<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.

Answer1:

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 )

Answer2:

This is because of event bubbling. Click on a bubbles to div and a click handler fires on div which redirects you to .link. Since the JavaScript is single-threaded, then the top handler is fired as the last one and you are always redirected to .link.

Try adding this code:

$('#clickable').on 'click', 'a', (ev) -> ev.stopPropagation()

Don't forget about 'a' part, which filters click to a elements. You can use jQuery's filters there.

<strong>EDIT</strong>

Since for unknown reasons the snippet I posted is not working for you, then how about this? (this time replace the code)

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

Recommend

  • Can you break a while loop from outside the loop?
  • Adding a Dropdown inside Kendo Grid
  • Executing a function that adds columns and populates them dependig on other columns in Pandas
  • Is it possible to disable esc/F11 key during full screen mode of webpage, programmatically?
  • Cannot convert a char value to money. The char value has incorrect syntax
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • Disable/remove close icon on Kendo Grid's default group column
  • include dlls in visual studio c++ 2008
  • jquery code not working without breakpoint
  • How to plot large time series (thousands of administration times/doses of a medication)?
  • Can I have a variable number of URI parameters or key-value pairs in Laravel 4?
  • Android distinguish between tap and double tap
  • R Split data.frame using a column that represents and on/off switch
  • How to make R's read_csv2() recognise the text characters properly
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • Zoom in and out of jPanel
  • saving file generated by TCPDF
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Firefox Extension - Monitor refresh and change of tab
  • Saving Changes After In-App Purchase Has Been Purchased
  • d3 v4 drag and drop with TypeScript
  • Alert pop up with LWUIT
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • CSS Linear-gradient formatting issue accross different browsers
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • What is Eclipse's Declaration View used for?
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Jquery - Jquery Wysiwyg return html as a string
  • SVN: Merging two branches together
  • Data Validation Drop Down Box Arrow Disappearing
  • AngularJs get employee from factory
  • How do you join a server to an Active Directory (domain)?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Append folder name and increment by 1 using batch script
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How to push additional view controllers onto NavigationController but keep the TabBar?