I have a set of div elements inside <a> tag with it's href.

The question is that there is a div inside of it with its own click event and I want that in case the div element trigger the click event, the <a> tag should not be triggered.

The function that manage the div click event try to stop propagation with no success.

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

What's wrong?

I have a set of div elements inside <a> tag with it's href.

The question is that there is a div inside of it with its own click event and I want that in case the div element trigger the click event, the <a> tag should not be triggered.

The function that manage the div click event try to stop propagation with no success.

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

What's wrong?

• javascript

• jQuery at hand? Simply do return false; in the event handler. – theHacker Commented Dec 25, 2014 at 23:00
• Yes, I use jQuery. Tried the return false; sentence in the function that manage the div click event and still the <a> tag trigger. – Apalabrados Commented Dec 25, 2014 at 23:03
• 3 Whenever someone asks about block elements inside inline elements, it makes me shiver. Guess I'm not quite all the way used to HTML5 yet. – adeneo Commented Dec 25, 2014 at 23:07
• @theHacker—that doesn't work for elements inside links. Even if event propagation is cancelled (per the OP), the link is still followed. The OP can use the W3C preventDefault method. – RobG Commented Dec 26, 2014 at 0:07
• @RobG jQuery calls both preventDefault() and stopPropagation(). It does not matter what element the handler is attached to. See code.jquery./jquery-1.11.2.js line 4668. – theHacker Commented Dec 26, 2014 at 0:18

3 Answers 3

The answer is the same whether or not you're using jQuery (or most other libraries).

When a link contains another element whose click event shouldn't cause navigation, then simply call preventDefault on the event. There is no jQuery magic here, it's just using a default DOM method:

event.preventDefault();

An example:

function foo(event) {

  console.log(event.target.textContent);

  if (event.stopPropagation) {
    // Stop propagation
    event.stopPropagation();
    // Stop default action
    event.preventDefault();
  }

  // IE model
  event.cancelBubble = true;
  event.returnValue = false;
  return false;
}

// Attach the listeners
document.getElementById('d0').addEventListener('click', foo, false);
document.getElementById('d1').addEventListener('click', foo, false);

Click on the Div, no click reaches the A element
<a href="#" onclick="console.log('Click reached ' + this.textContent)">Link
  <div id="d0">Div</div>
</a>Click on the Div, the link isn't followed
<a href="http://www.apple.">Apple
  <div id="d1">Div</div>
</a>

The trick is that a click on the div doesn't bubble to the link, but without preventDefault, link is followed anyway.

A better idea is to not to do this at all. The div doesn't appear to belong to the A element, so put it outside. Then there are no issues with a click on the div causing navigation.

If you're using jQuery to attach to the event, then do

e.preventDefault();

JQuery normalizes the event object so this method is available on all browsers (otherwise older IE's don't have it).

Here's the documentation for preventDefault().

If that doesn't help, then try attaching a click handler on the <a> itself and call preventDefault() from that.

Listen to multiple things then perform an action determined in the callback.

$('.obj1, .obj2, .obj3').on('click', function (event) {
  var target = $(event.target);
  if (target.hasClass('.obj1')) {
    # do stuff
  }
// ...