How to deselect a button using JavaScript

Question

I have a button that the user must click in order to upload files:

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

Then the user must use the space bar to pause / play the video. My problem is that the user presses the button, the button remains pressed when he or she presses the spacebar, the button is like again. To solve this problem, the user will have to click elsewhere on the screen (except for the button), and then the space bar will work to pause / play the video. But I do not want the user to click elsewhere. So I tried to click the span element using JS, but it did not work:

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

This click should simulate a user click on the screen, but it does not work, because when you press the spacebar, the button is pressed.

?

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() click.

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

to activate the button: $ ("# buttonId"). css ("event pointers", "auto");