如何使用JavaScript取消选择按钮

Question

我有一个按钮，用户应该点击它来上传文件：

window.URL = window.URL || window.webkitURL;

var button = document.getElementById("button"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

button.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault();
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    for (var i = 0; i < files.length; i++) {
      var videoFile = document.createElement("video");
      videoFile.setAttribute("id", "recording");
      videoFile.src = window.URL.createObjectURL(files[i]);
      videoFile.height = 240;
      videoFile.width = 320;
      videoFile.setAttribute("controls", true);
      videoFile.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      fileList.appendChild(videoFile);
    }
  }
}

接下来，用户应该使用空格键来暂停/播放视频。我的问题是，用户点击按钮后，按钮保持被点击状态，所以当他或她按下空格键时，按钮会再次被选中。要解决这个问题，用户必须在屏幕的其他位置（除了按钮之外）点击一下，然后空格键才能用来暂停/播放视频。但我不希望用户点击其他地方。因此，我尝试使用JS点击一个span元素，但没有成功：

document.getElementById("spanElement").click();

这个点击应该模拟用户在屏幕上的点击，但由于按下空格键时会触发按钮点击事件，所以它无法正常工作。有什么解决建议吗？谢谢。

- user5139637

---

这似乎是可以帮助的东西：https://dev59.com/Ol3Va4cB1Zd3GeqPC7Op - SagaciousLearner

Answer 1

使用 HTMLElement.blur() 应该会有预期的效果。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur

button.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault();
  e.target.blur();
}, false);

这将在点击后从元素中移除焦点。

- Philippe Schwyter

Answer 2

这是因为在点击按钮后，它仍然保持焦点，为了解决这种行为，您可以在单击事件的末尾使用.blur()。

blur()方法用于从当前元素中移除键盘焦点。

button.addEventListener("click", function (e) {
    if (fileElem) {
      fileElem.click();
    }

    e.target.blur(); //Remove focus after click
    e.preventDefault();
}, false);

希望这能有所帮助。

- Zakaria Acharki

Answer 3

您也可以为按钮添加CSS - 指针事件

禁用按钮：$("#buttonId").css("pointer-events", "none");

重新激活按钮：$("#buttonId").css("pointer-events", "auto");

- Yudishtira