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

用户2718671

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

但是目前，它无法按预期工作。如何检测用户何时在文本区域之外单击？有.not()相当于jQuery的东西吗？用户还应该能够调整文本区域的大小。目前，它在调整大小后关闭。有任何想法吗？

这是一个小提琴：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();
        });
    });
});

用户2718671

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

这是新的小提琴：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();
            });
        }
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。