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();

此点击应该模拟用户在屏幕上的点击，但它不起作用，因为当按下空格键时，点击该按钮。

有什么建议可以解决这个问题吗？谢谢

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);

一旦点击，这将从元素中移除焦点。

Answer 2

之所以发生这种情况，是因为点击按钮后它仍然聚焦，因此要解决这种行为，您可以在点击事件结束时使用 .blur() 。

blur（）方法用于从当前元素中删除键盘焦点。

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

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

希望这有帮助。

Answer 3

您还可以将css添加到按钮 - 指针事件

禁用按钮：$（“＃buttonId”）。css（“pointer-events”，“none”）;

重新激活按钮：$（“＃buttonId”）。css（“pointer-events”，“auto”）;

如何使用JavaScript取消选择按钮

3 个答案: