Question

I have a textarea within a div.
I want to be able to click on the overlay.
But what happens is the textarea catches the click as well as the div.

<div id="d" name="d"><textarea id="ta" name="ta">my text</textarea></div>

<script type="text/javascript">
$('#d').click(function(){alert("clicked on div");)};
$('#ta').click(function(){alert("clicked on textarea");)};
</script>

I just want the div alert to fire, and not the textarea.

Answer 1

First permuting the order of the brackets at the end to prevent javascript errors:

$('#d').click(function(){alert("clicked on div");});
$('#ta').click(function(){alert("clicked on textarea");});

Then I get both alerts, see this example.

=== UPDATE ===

The event bubbles from the upper dom element down to the lowest (if you don’t prevent bubbling). So you can stop bubbling the event after the textarea, but you can’t prevent to get it in the div and not in the textarea. You have to change the order of the html elements (divand textarea) and then add a return false; at the end of the div click handler or add an event.stopPropagation();. Also see my updated example or my next example.