在前端开发中，我们经常使用 contenteditable 属性来实现可编辑的文本区域。然而，在使用该属性时，一个常见的问题是：当用户点击 contenteditable 区域外面的其他地方时，这个区域依然会保持焦点状态。
为什么会发生这种情况？
这个问题的根本原因在于事件传播机制。当用户点击页面上某个元素时，浏览器会按照一定的顺序依次触发该元素及其父元素的相关事件，例如 click、mousedown、mouseup 等等，直到事件被处理或者到达了 DOM 树的根节点。
对于 contenteditable 元素来说，它们通常会被放置在一个容器中，比如一个 div 或者一个 section。而当用户点击容器外面的其他地方时，由于事件传播机制的存在，最终还是会触发到 contenteditable 元素上的相关事件，从而让它保持焦点状态。
如何解决这个问题？
要解决这个问题，我们需要阻止事件传播，从而避免 contenteditable 元素接收到外部事件并保持焦点状态。有很多方法可以实现这个目标，以下是一些常见的方案：
1. 使用 jQuery 或其他库
如果你使用 jQuery 或其他类似的 JavaScript 库，可以很容易地通过一个简单的事件处理程序来实现阻止事件传播。例如，下面的代码将在用户点击 contenteditable 区域外面的任何元素时，取消该元素上的所有事件处理程序，并阻止事件传播：
$(document).on('click', function(event) {
var $target = $(event.target);
if (!$target.closest('[contenteditable]').length) {
$('[contenteditable]').blur();
event.stopPropagation();
}
});在这个例子中，我们使用了 jQuery 的 on 方法来绑定了一个全局的 click 事件。当用户点击页面上任何元素时，我们首先检查该元素是否为 contenteditable 元素或者它的后代元素，如果不是，则调用 blur 方法取消当前 contenteditable 元素的焦点状态，并调用 stopPropagation 方法阻止事件继续传播。
2. 使用原生 JavaScript
如果你不想依赖于第三方库，也可以使用原生的 JavaScript 实现相同的效果。例如，以下代码将使用事件委托方式绑定一个全局的 click 事件，当用户点击页面上除 contenteditable 元素之外的任何元素时，都会触发该事件处理程序：
document.addEventListener('click', function(event) {
var target = event.target;
if (!target.closest('[contenteditable]')) {
document.querySelector('[contenteditable]').blur();
event.stopPropagation();
}
});在这个例子中，我们使用了 document 对象来绑定全局的 click 事件。当用户点击页面上任何元素时，我们首先检查该元素是否为 contenteditable 元素或者它的后代元素，如果不是，则调用 blur 方法取消当前 contenteditable 元素的焦点状态，并调用 stopPropagation 方法阻止事件继续传播。
总结
通过以上两种方法，我们可以很容易地解决 contenteditable 元素保持焦点状态的问题。同时，我们也可以深入了解事件传播机制，以及如何使用原生 JavaScript 和 jQuery 来实现事件委托和事件处理程序。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30771