javascript - How to detect a click outside the current textarea in prototype? -

I have a div that "converts" into a text string. Well, this is a hidden textera that shows when the Divis clicks on a div, the divis will hide and Texera will find the Div's internal HTML. The user can now edit the text and after that it is finished, I want to click outside the text. Now the teaser hides and the div appears again with updated HTML content.

But at the moment it does not work as expected when a user clicks outside of the texts, how can I find out? Is there any .not () equals jQuery? The user should be able to resize the texts At the moment, it stops after resizing. any idea?

Here's a fiddle:

HTML here:

  & lt; Div class = "media_box" & gt; & Lt; Div class = "label" & gt; Textfeld: & lt; / Div & gt; & Lt ;! - Debit will be editable with the content of the property but there will be no line break - & gt; & Lt; Div class = "txt_area" & gt; Advertise on this website Now there is no information about any other Portable Portability Portals. The intervals and the most important aspects of men's women have been told about. Maurice's daughter Elizabeth Dignisim Cuban Latitude, Cuba, East Levertis Expedition, Volleypet and Laurem Except, Seasonal and Interval, for a lot of competitions for qualifying for classes, According to our rival, It's just a day's time. & Lt; / Div & gt; & Lt; Textarea class = "cright_txtarea" style = "display: none" & gt; & Lt; / Text field & gt; & Lt; / Div & gt;  

js:

  document.observe ('dom: loaded', function () {$$ ('body') [0] .on ( 'Click', '.txt_area', function (event, element) {event.stopPropagation (); var div_text = element.innerHTML; element.hide (); var text_area = element.next ('textarea'); text_area.show (); Text_area.value = div_text; $$ ('html') [0] .on ('click', function () {element.show (); element.update (text_area.value); text_area.hide () ;});});});  

A solution has been found, but I'm still open to more beautiful people; )

This is the new answer:

Updated JavaScript:

  document.observe ('dom: loaded', function () {$ $ ('Body') [0] .on ('click', '.txt_area', function (event, element) {event.stopPropagation (); var div_text = element.innerHTML; element.hide (); var text_area = Element.next ('Textarea.show (); text_area.value = div_text; text_area.onmouseover = function () {text_area.observe (' click ', function (event)} {event.stop (event);})}} Text_area Onmouseout = function () {$$ ('html') [0] .on ('click', function () {console.log (text_area.value); element Show (); element.update (text_area.value); Text_area.hide ();})}}})}};