¿Solo se enfoca en contenteditable cuando se hace clic en el elemento?

Parece con satisfacción que obtienes el foco cada vez que haces clic en la página.

¿Cómo puedo enfocar solo cuando se hace clic en el elemento en sí mismo, pero no fuera del elemento?

Ver demostración: http://jsbin.com/iTEkUKa/1/edit

Intente hacer clic fuera de cualquiera de las casillas, todavía resulta en foco, ese es el problema.

Usa este script:

Funciona fácilmente explicado así:

Al hacer clic fuera de un elemento contento, obtener el elemento contenteditable que se enfocará.
Si, en el siguiente evento de enfoque, este elemento obtiene el foco, elimínelo.

https://gist.github.com/nuxodin/b02064610abf93dab8c6

 if (/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)) { document.addEventListener('DOMContentLoaded', function(){ var fixEl = document.createElement('input'); fixEl.style.cssText = 'width:1px;height:1px;border:none;margin:0;padding:0; position:fixed; top:0; left:0'; fixEl.tabIndex = -1; var shouldNotFocus = null; function checkMouseEvent(e){ if (e.target.isContentEditable) return; var range = document.caretRangeFromPoint(e.clientX, e.clientY); var wouldFocus = getContentEditableRoot(range.commonAncestorContainer); if (!wouldFocus || wouldFocus.contains(e.target)) return; shouldNotFocus = wouldFocus; setTimeout(function(){ shouldNotFocus = null; }); if (e.type === 'mousedown') { document.addEventListener('mousemove', checkMouseEvent, false); } } document.addEventListener('mousedown', checkMouseEvent, false); document.addEventListener('mouseup', function(){ document.removeEventListener('mousemove', checkMouseEvent, false); }, false); document.addEventListener('focus', function(e){ if (e.target !== shouldNotFocus) return; if (!e.target.isContentEditable) return; document.body.appendChild(fixEl); fixEl.focus(); fixEl.setSelectionRange(0,0); document.body.removeChild(fixEl); }, true); }); } function getContentEditableRoot(el) { if (el.nodeType === 3) el = el.parentNode; if (!el.isContentEditable) return false; while (el) { var next = el.parentNode; if (next.isContentEditable) { el = next; continue } return el; } }