我有一个按钮,用户应该点击它来上传文件:
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();
这个点击应该模拟用户在屏幕上的点击,但由于按下空格键时会触发按钮点击事件,所以它无法正常工作。有什么解决建议吗?谢谢。