如何检测原型中当前文本区域之外的点击？

Question

我有一个“转换”为文本区域的 div。嗯，这是一个隐藏的文本区域，当有人点击 div 时会显示出来。 div 将隐藏，textarea 将获取 div 的 innerHTML。用户现在可以编辑文本，在他或她完成后我希望他们在文本区域之外单击。现在 textarea 隐藏，div 再次显示更新的 html 内容。

但目前它没有按预期工作。我如何检测用户何时在文本区域外点击？是否有与 jQuery 等效的 .not()？用户还应该能够调整文本区域的大小。目前它在调整大小后关闭。有什么想法吗？

这是一个小提琴： http://jsfiddle.net/t3qRL/

这里是 HTML：

<div class="media_box">
    <div class="label"> Textfeld:</div>
    <!-- with the property contentEditable the div would be editable but there would be no linebreaks -->
    <div class="txt_area"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id nunc quis purus aliquam sollicitudin porta nec dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis eleifend dignissim. Curabitur ligula est, rhoncus eget lobortis accumsan, volutpat et lorem. Suspendisse augue mauris, mollis et lectus at, sodales pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In rutrum est vitae justo ullamcorper malesuada.
    </div>
    <textarea class="cright_txtarea" style="display: none">
    </textarea>
</div>

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();
        });
    });
});

Answer 1

找到了解决方案，但我仍然愿意接受更优雅的解决方案；）

这是新的小提琴：http://jsfiddle.net/t3qRL/2/

更新的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');
        text_area.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();
            });
        }
    });
});

Answer 2

document.on('click', function(evt, elm){
  if(elm.match('.txt_area')){
    // do your textarea magick here
  }else{
    // cancel the textarea etc. if it's open
  }
});

这应该会让你看起来不那么痛苦。