0

I am trying to enhance a HTML textarea with some BB-Code controls that should only be available when the textarea has focus. The desired behaviour looks like this:

Picture 1 - before focus event: before focus event
(source: gaedekenet.de)

Picture 2 - after focus event (correct behaviour): correct behaviour
(source: gaedekenet.de)

The above correct behaviour is accomplished by clicking in the LOWER part of the textarea - where no buttons will appear. But whenever the user clicks in the top left part of the textarea, the following will happen:

Picture 3 - after focus event (incorrect behaviour): erroneous behaviour
(source: gaedekenet.de)

It seems to me that not only the "focus" event is triggered but also "click", "mousedown", "mouseup", etc.

What I need to do now, is to stop the event propagation in my own code (the focus part) so that no events can reach the BB Code plugin (which is a 3rd party plugin). My current approach looks like this:

$(#myText)
    .focus(function(e){
        e.stopPropagation().stopImmediatePropagation();
        // initialize and show the bb code buttons here
    })
    .click(function(e){
        e.stopPropagation().stopImmediatePropagation();
    })
    .mouseup(function(e){
        e.stopPropagation().stopImmediatePropagation();
    })
    .mousedown(function(e){
        e.stopPropagation().stopImmediatePropagation();
    });

What am I missing?

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Eddie
  • 109
  • 1
  • 11

1 Answers1

1

e.stopPropagation() stops propagation, to prevent default events use

e.preventDefault()

Full jQuery event API documentation here

Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
  • Thanx, e.preventDefault() turned out to be the core of my solution. But to reach perfection (correct handling of focus and click events in a huge array of above textareas) I also had to create a rather complex set of event listeners that depend on each other. The solution I came up with took me 6 hours and ruined my day. But it's done :-) – Eddie Sep 15 '14 at 22:53