How to stop event propagation from within an anchor's href attribute without using onclick or onmousedown

Question

Due to restrictions, even though it is something i avoid altogether, in a certain situation i have to use the javascript: syntax in a href attribute of an achor tag.

(EXPLANATION: In my CMS i use a rich text editor to allow the user to make changes to text elements, including links. In some cases specific javascript: calls are required and i banned onclick completely from the link editing features (to simplify the process for the user). However, as one of the links appears within a block that reacts to an onclick event, the thing double-fires)

Like this:

<a href="javascript:doSomething()"></a>

My problem is that this link is inside a container that already reacts to an onclick event. Therefore i wanted to pass the event object along to the doSomething() method, so that i could then use jQuery's

event.stopPropagation()

method.

Unfortunately however, it seems that passing the event object along

<a href="javascript:doSomething(event)"></a>

does not seem to work at all. Safari won't say anything while Firefox will report ReferenceError: event is not defined

I assume that this is the case because href="" is not a script-initiating attribute (such as onclick). The problem is that in this situation i won't be able to access the tag beyond what i already do.

Therefore i either need

1.) A way to pass the event object to the doSomething() function from within the href attribute

or

2.) A way to stop the event propagation right in that anchor (after its clicked) by other means.

Thank You for any constructive input!

Answer 1

You cannot stop event propagation from the href attribute because:

1. When the href code executes, it is not an event. It just executes that code, similar to the "location hack". Like entering javascript:doSomething() in the browser's address bar.

2. The href code executes after the events fire on the link -- including bubbling.

   You can see that behavior in this jsFiddle. Note that mouseup, mousedown, and click all fire both for the link, and on the container when the link is clicked, before the href code executes.

If there are event listeners that you want to block, you'll have to find another way.

---

But, if you can append javascript to the document you can block the href using preventDefault().

For example:

• jQuery, before version 1.7:

  $("#container a").bind ("mousedown mouseup click", function (e) {
      e.preventDefault();
  } );
  

• jQuery 1.7 and later:

  $("#container a").on ("mousedown mouseup click", function (e) {
      e.preventDefault();
  } );
  

  or (better):

  $("#container").on ("mousedown mouseup click", "a", function (e) {
      e.preventDefault();
  } );
  

You can see this last version live at jsFiddle.