2

hope you can help me. I have html markup like this:

<a href="error.htm" class="button" id="_uiStart" style="-moz-border-radius: 4px 4px 4px 4px;">
<span>Start</span>
<input type="text" id="_uiCode">
</a>

Normaly, when user clicks on the textbox, the page redirects to "error.htm". I wanted to prevent that so I use jQuery to cancel that:

$(document).ready(function() {
   var mute = function(event){        
       event.stopPropagation();
   };    
   $('a.button input').click(mute)
    .mousedown(mute)
    .mouseup(mute);
}

However, this does not work, the click still gets processed by anchor and redirects to "error.htm".

Please help, thank you.

omittones
  • 847
  • 1
  • 10
  • 23
  • What is causing the redirect in the first place? Maybe you can just unbind whatever event is causing the redirect? – The Muffin Man Mar 14 '11 at 22:05
  • May I ask why the `a` wraps the input in the first place, is there a specific reason why the link should still work when javascript is active? – Kristoffer Sall-Storgaard Mar 14 '11 at 22:39
  • The redirect is caused by the anchor receiving click and performing it's default action, I'm 99% sure of this. – omittones Mar 14 '11 at 22:41
  • @Kristoffer: The a is button like, it should perform stuff on user click, specifically it should check the validity of text input, and then notify user if it's not valid, and redirect if it is. – omittones Mar 14 '11 at 22:45
  • I attached an anchor click handler which only calls preventDefault(), and that took care of the anchor redirect issue, however now, I can focus on the textbox and get the caret to appear, but I can't select the text in it. – omittones Mar 14 '11 at 22:52

2 Answers2

5

Return false instead (working fiddle)

stopPropagation is only for event handlers, not default behavior.

preventDefault does what you want, but returning false triggers both.

Updated fiddle:

Add $(this).focus() before returning and you should be golden. I would however suggest you look at another way of setting up your html so the <a> doesn't wrap the input in the first place.

Kristoffer Sall-Storgaard
  • 10,576
  • 5
  • 36
  • 46
  • If I return false in anchor click function, the textbox won't receive the click, and so it won't get focused on. – omittones Mar 14 '11 at 22:32
  • I dropped the anchor and used span instead. Easier this way, span is inert tag, so no unexpected things happening on click. Thanks :) – omittones Mar 18 '11 at 10:16
  • With this solution the input still can't receive mouse events, like change text cursor position or text selection. Did anyone figure out how to do it in Firefox for input inside anchor? – NPC Dec 24 '13 at 14:01
  • @NPC The premise is flawed, wrapping a link around an input field is bound to give several problems, this just solves one of them. – Kristoffer Sall-Storgaard Dec 24 '13 at 15:01
1

edited after omittones's comment:

why not doing

$('a.button input').click(function() { $(this).focus(); return false;});

This will prevent the normal event from happening. event.stopImmediatePropagation (which is as far as I know the way to stop Propagation) stops the event from bubbling up through the hierarchy of your code. If this doesn't work in all browsers, just do both.

$('a.button input').click(function() {
    $(this).focus(); // added this line after editing
    e.stopImmediatePropagation();
    return false;
});
  • This does not work because it prevents textbox from receiving user input. – omittones Mar 14 '11 at 22:31
  • Yes, but still the user can't select the text in the textbox. I'm looking into using another html tag to wrap the textbox, I choose the anchor because of href, so I can transfer data to JS via href of the anchor. But it seems to be more trouble than it's worth. – omittones Mar 14 '11 at 23:02