jquery not select?

Question

i have a click event for $('#blah div'). div has text inside of it (not inside a div, span, p, etc) and has a textarea in it. The textarea is triggering the event as well, how do i make it only trigger when i click the text and ignore the textarea?

Answer 1

Stop the bubble, like this:

$('#blah div').click(function() {
  alert("Div click");
});

$('#blah div textarea').click(function(e) {
  e.stopPropogation();
});

This tells it to cancel the event bubble when the click originated in the <textarea>. Normally the click happens on the <textarea> and continues to bubble to the parents and fire their click handlers...this prevents that.

Answer 2

An alternative to preventing the event from happening is dealing with it:

$("#blah div").bind("click", function(e) {
    if (e.target.type !== "textarea") {
        alert("Hello.");
    }
});

You can check what the target of the event was inside your event handler function. That means that you can take further actions only if the target is anything but a textarea.