如何让HTML的contenteditable元素仅响应鼠标左键点击？

问题出在你只阻止了右键点击事件，但contenteditable元素的编辑状态激活可能在mousedown阶段就触发了，且单纯阻止右键事件没法动态控制编辑权限。正确的做法是通过响应式数据动态切换contenteditable属性，仅在左键点击时开启编辑：

实现代码 #

模板部分 #

<div 
  :contenteditable="isEditable"
  @mousedown="handleMouseDown"
  @blur="isEditable = false"
  class="editable-box"
>
  点击我（仅左键）开始编辑
</div>

脚本部分 #

export default {
  data() {
    return {
      isEditable: false
    };
  },
  methods: {
    handleMouseDown(e) {
      // 鼠标左键对应的button值为0
      if (e.button === 0) {
        this.isEditable = true;
        // 确保元素获得焦点并进入编辑状态
        this.$nextTick(() => {
          e.target.focus();
        });
      } else {
        // 右键点击时阻止默认行为，同时关闭编辑权限
        e.preventDefault();
        this.isEditable = false;
      }
    }
  }
};

样式（可选） #

.editable-box {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 40px;
}
.editable-box[contenteditable="true"] {
  border-color: #2196F3;
  background-color: #f5f9ff;
}

关键说明 #

1. 用mousedown而非click事件：因为contenteditable的编辑激活逻辑在鼠标按下阶段就已触发，提前拦截才能生效
2. 动态控制contenteditable属性：仅在左键点击时设为true，右键点击或失去焦点时重置为false
3. $nextTick确保焦点设置生效：修改isEditable后DOM更新需要时间，延迟执行focus才能让元素进入编辑状态

内容的提问来源于stack exchange，提问作者Spixy