Question

How do I make this work:

<div onclick="alert('You clicked me!')" style="background:lightblue;display:inline-block;padding:20px">
    <textarea rows="5" cols="50">You can click and select text here normally, but I don't register mouse events from the DIV behind me!</textarea>
    <div id="inner" style="background:lightgreen">Same here. I want my own mouse events - not the ones from #inner.</div>
</div>

Thank you!

Answer 1

I’m guessing you want this:

<div onclick="if (event.target === this) alert('You clicked me!')">

Live demo: http://jsfiddle.net/UZtag/1/

So, the alert does not pop up if the TEXTAREA or #inner DIV is clicked, but only if the outer DIV is clicked directly.