如何让对话框CANCEL按钮不触发仅OK执行的函数？HTML文件重命名问题

嘿，这个问题我之前也碰到过！核心原因是你没对**window.confirm()的返回值**做判断——它会返回一个布尔值：用户点OK时是true，点CANCEL时是false。你得把这个判断逻辑加到触发流程里，只有当用户确认（返回true）时，才执行myRenameFunc()。

先看看你可能写错的地方 #

通常出错的代码大概是这样的：

<!-- 直接调用函数，不管确认结果 -->
<input type="text" value="文件.txt" onclick="myRenameFunc(); confirm('确定重命名？')">

或者函数内部没判断返回值：

function myRenameFunc() {
  confirm('确定要重命名吗？');
  // 不管用户点啥，这里的重命名逻辑都会跑
  // ... 你的重命名代码
}

正确的解决方式 #

方式1：在HTML事件属性里直接判断

把确认框的结果作为执行函数的前提：

<input type="text" value="文件.txt" onclick="if(confirm('确定要重命名这个文件吗？')) { myRenameFunc(this); }">

这里的this能把当前的input元素传给函数，方便你获取用户修改后的新文件名。

方式2：把确认逻辑封装到函数里

如果更喜欢把逻辑都放在JS里，修改myRenameFunc就行：

function myRenameFunc(inputElement) {
  // 先弹出确认框，判断用户选择
  if (!confirm('确定要重命名吗？')) {
    // 用户点了取消，直接返回，不执行后续代码
    return;
  }
  // 到这一步说明用户确认了，执行重命名逻辑
  const newName = inputElement.value;
  console.log('准备重命名为：', newName);
  // 这里写你实际的重命名操作，比如发请求给后端、更新列表等
}

对应的HTML可以改成（用onblur比onclick体验更好——用户改完名失去焦点时再确认）：

<input type="text" value="文件.txt" onblur="myRenameFunc(this)">

额外优化：取消后恢复原文件名 #

可以加个小细节：用户取消重命名时，把input的值恢复成原来的文件名，避免误改后内容还留在输入框里：

function myRenameFunc(inputElement) {
  // 先存好原来的文件名（存在input的自定义属性里）
  const originalName = inputElement.dataset.originalName;
  
  if (!confirm('确定要重命名吗？')) {
    // 取消的话，恢复原文件名
    inputElement.value = originalName;
    return;
  }
  
  // 执行重命名逻辑
  const newName = inputElement.value;
  // ... 你的重命名操作
  
  // 如果重命名成功，更新存储的原文件名
  inputElement.dataset.originalName = newName;
}

对应的HTML要加上存储原文件名的属性：

<input type="text" value="文件.txt" data-original-name="文件.txt" onblur="myRenameFunc(this)">

这样就能完美解决点击CANCEL还执行函数的问题啦！

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