javascript - 如何创建一个在 div 外部单击时取消选择的函数

Question

我有一个函数，可以在双击时选择一个div，问题是我之后无法取消选择它，这是脚本 CSS:

    div.editable
    {
        border: solid 2px Transparent;
        padding-left: 15px;
        padding-right: 15px;
    }

    div.editable:hover
    {
        border-color: black;
    }

</style>

脚本:

    // Uncomment the following code to test the "Timeout Loading Method".
    // CKEDITOR.loadFullCoreTimeout = 5;

    window.onload = function() {
        // Listen to the double click event.
        if ( window.addEventListener )
            document.body.addEventListener( 'dblclick', onDoubleClick, false );
        else if ( window.attachEvent )
            document.body.attachEvent( 'ondblclick', onDoubleClick );

    };

    function onDoubleClick( ev ) {
        // Get the element which fired the event. This is not necessarily the
        // element to which the event has been attached.
        var element = ev.target || ev.srcElement;

        // Find out the div that holds this element.
        var name;

        do {
            element = element.parentNode;
        }
        while ( element && ( name = element.nodeName.toLowerCase() ) &&
            ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );

        if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
            replaceDiv( element );
    }

    var editor;

    function replaceDiv( div ) {
        if ( editor )
            editor.destroy();

        editor = CKEDITOR.replace( div );
    }

</script>

DIV:

<div class="editable" style="height:490px;overflow:auto;" id="text2">
<p>Click Here to edit</p>";
</div>

我想要实现的是，当我单击外部或单击另一个对象或按钮时，div 将自动取消选择。

Answer 1

与处理双击的方式相同:

// Listen to the click event.
if ( window.addEventListener )
  document.body.addEventListener( 'click', yourCallback, false );
else if ( window.attachEvent )
  document.body.attachEvent( 'click', yourCallback );

此事件将触发，直到另一个点击处理程序附加到 body 的子元素。在 yourCallback 中您可以结束编辑模式。