15

I currently making a filebrowser. If the user clicks on a link to a file a little window open and asks for options (like download and view). I've done this using the onclick attribute. If I click on the link the javascript is executed, but after this the url specified in href opens. What I'm trying to do is: If you click the link javascript get executed and forwards you eventually. But if the link gets rightclicked the "copy link location" should still be available. I'm thinking of solving this by blocking the forwarding scriptside. So if the link gets rightclicked no javascript is executed and you can copy the link location. But if you left click the link the javascript is executed and the link is not opened. Is that possible with javascript, or is there any other way of achieving this behavior?

jangxx
  • 989
  • 1
  • 9
  • 23

4 Answers4

20

In order to prevent the link executing, one way is to let the "onclick" method return false.

For example:

<a href="http://..." onclick="return clickfunc()">...</a>

If clickfunc() returns false, a click on the link will not direct to "http://..."

Although you are probably handling it more like

<a href="http://..." id="somebutton">...</a>
<script>
document.getElementById('somebutton').onclick = function() { 
      ... 
      else { return false; }
};
</script>
Armatus
  • 2,206
  • 17
  • 28
  • 4
    Javascript != jQuery. In jQuery return false does mean "stop propagation and prevent default", but in Javascript it just means "stop propagation" (which won't stop the default link-clicking action). See http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopImmediatePropagation – machineghost Apr 18 '12 at 22:41
  • And as a side note, I'm not sure return false even does that in all browsers; the spec I linked was "DOM Level 3", and AFAIK IE8 doesn't even fully implement that spec. – machineghost Apr 18 '12 at 22:46
  • I'm not referring to jQuery in any way. When I make a link `Test`, it does nothing upon clicking in all browsers I have available for testing. I wasn't aware returning false was bad practice or that it doesn't work under circumstances until now. If it is, I apologise, but please provide a more understandable resource or point me to the correct heading - I can't extract anything relevant here from your link. – Armatus Apr 18 '12 at 23:03
  • I take my comment back, as far as onclick attributes go. As per this SO question http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event it looks like there is special "DOM 0" behavior that browsers follow which gives "return false" in an onclick a different meaning than it normally would have in an event handler. However (as that SO post I linked mentions), onclick attributes are the "old" way of doing event handling; proper event handling functions are widely regarded to be preferable (in the web dev community). – machineghost Apr 18 '12 at 23:08
  • I recommend reading machineghost's link just now - it does work but for professional causes the `preventDefault` method should probably be preferred. – Armatus Apr 18 '12 at 23:16
  • Armatus, fair point about my (first) link; I really should have been clearer. The key part of my (first) link was "handleEvent ... No Return Value". In other words, the official spec doesn't say "return false == preventDefault" it says "there's not supposed to be a return value from the listener". Or at least, I'm pretty sure that's what it says (those specs are a pain to read). – machineghost Apr 18 '12 at 23:22
  • Interesting, thanks for clarifying that :) Although returning false seems like a sensible (and intuitive) thing to me, and it doesn't seem to have caused any real problems until now - probably the reason why most(all?) browsers seem to have adapted it. – Armatus Apr 18 '12 at 23:28
11

You have to prevent default from your click function: 

function stopDefAction(evt) {  
  evt.preventDefault();  
}
Trisped
  • 5,705
  • 2
  • 45
  • 58
bobek
  • 8,003
  • 8
  • 39
  • 75
  • 2
    This answer is closer to correct than the others, but as I commented on them, return false does NOT equate to prevent default in raw Javascript (it equates to stopPropagation()). So your answer of preventDefault is the only correct one (return false won't cut it). – machineghost Apr 18 '12 at 22:44
  • I don't think you should forget using return false, there were some problems with preventDefault() i had and browser compatibilty.. other than that I think this is the correct answer! ( +1'd ). – Antwan van Houdt Apr 18 '12 at 22:54
  • Atwan if you can recall those problems I'd be very curious to hear them; preventDefault has been around since the early days of Javascript, so it'd be very surprising if browsers didn't implement it correctly. – machineghost Apr 18 '12 at 22:57
1

Yes, you will need to prevent the default action of the event. You can do so by returning false in your onclick attribute.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 1
    Javascript != jQuery. In jQuery return false does mean "stop propagation and prevent default", but in Javascript it just means "stop propagation" (which won't stop the default link-clicking action). See http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopImmediatePropagation – machineghost Apr 18 '12 at 22:41
  • And as a side note, I'm not sure return false even does that in all browsers; the spec I linked was "DOM Level 3", and AFAIK IE8 doesn't even fully implement that spec. – machineghost Apr 18 '12 at 22:47
  • No, I did not say eventListener (and nothing about jQuery), I meant the onclick attribute the OP uses. – Bergi Apr 18 '12 at 23:01
  • Oh, my apologies; I didn't realize that from your answer (but regardless, if the OP didn't mention an onclick attribute do you really want to encourage its usage? on* attributes are widely regarded as being inferior to proper event handlers ...) – machineghost Apr 18 '12 at 23:04
  • To cite: "I've done this using the onclick attribute". No, I don't want to recommend it, just show the simplest solution :-) I began with a link to the better way. – Bergi Apr 18 '12 at 23:10
  • the link in answer is 404 , i think this is the new link from mdn : https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault – Bor691 Jul 08 '14 at 06:29
  • @Bor691: Thank you! You might just [have suggested an edit](http://stackoverflow.com/help/editing), btw. – Bergi Jul 08 '14 at 11:12
1

you can replace href attribute by text "javascript:void(0)", for example:

<a href="http://..." id="somebutton">...</a>
<script>
document.getElementById('somebutton').href="javascript:void(0)"
</script>
lexa-b
  • 1,759
  • 15
  • 15