title: how to create a function to unselect when clicked outside div
body: <p>i have a function which selects  a div when double clicked, the problem is i can't unselect it afterwards , here is the script
  CSS:
      </p>
  
  <pre><code>    div.editable
      {
          border: solid 2px Transparent;
          padding-left: 15px;
          padding-right: 15px;
      }
  
      div.editable:hover
      {
          border-color: black;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>SCRIPT:
      </p>
  
  <pre><code>    // 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 &amp;&amp; ( name = element.nodeName.toLowerCase() ) &amp;&amp;
              ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) &amp;&amp; name != 'body' );
  
          if ( name == 'div' &amp;&amp; element.className.indexOf( 'editable' ) != -1 )
              replaceDiv( element );
      }
  
      var editor;
  
      function replaceDiv( div ) {
          if ( editor )
              editor.destroy();
  
          editor = CKEDITOR.replace( div );
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>DIV:</p>
  
  <pre><code>&lt;div class="editable" style="height:490px;overflow:auto;" id="text2"&gt;
  &lt;p&gt;Click Here to edit&lt;/p&gt;";
  &lt;/div&gt;
  </code></pre>
  
  <p>what i want to achieve is when i click outside or click another object or a button the div will unselect automatically.</p>