javascript - 如何在整个网页上绑定按下空格事件，并在输入框里按空格不会触发？

Question

我想做个电台网站，按下空格播放/暂停

document.onkeydown = function(event){
    if (event.keyCode == "32") {
        if ($(".jp-pause").css('display') == 'none') {
            //如果暂停按钮不显示 未播放
            $(".jp-play").click();
        }else {
            //如果暂停按钮显示 播放中
            $(".jp-pause").click();
        }
    }
}

但是在<input>标签中按空格也会触发

Answer 1

document.onkeydown = function(event){
    if (event.keyCode === 32) {            
        if(event.target.nodeName !== "INPUT"){
            if ($(".jp-pause").css('display') == 'none') {
                //如果暂停按钮不显示 未播放
                $(".jp-play").click();
            }else {
                //如果暂停按钮显示 播放中
                $(".jp-pause").click();
            }
        }
    }
}

Answer 2

事件中判断input是否获得焦点,document.activeElement;

Answer 3

jquery方法：$(':focus').length

document.onkeydown = function (event) {
    if (event.keyCode == "32") {
        if ($(':focus').length == 0) {
            alert("暂无获得焦点的元素");
        }
    }
}

js方法：

document.onkeydown = function (event) {
    if (event.keyCode == "32") {
       var x = document.activeElement.tagName;
        if (x == "INPUT" || x=="TEXTAREA") {
            alert("暂无获得焦点的元素");
        }
    }
}

其他：
1.还有如果页面输入框不多的话可以定义变量控制
2.还有onkeydown是按住不放的事件，好像不是按一次，具体也不是很懂你可以查查
3.关于JS的document.activeElement

Answer 4

下面哪种不可以，那么换一种，只有body这里有onkeydown事件，然后去判断e.target（触发事件的对象，如果是input就执行input如果不是else body 的）

你用相同的onkeydown事件，body和input都绑定。你在input上写阻止冒泡stopPropagation(),不就不会冒泡到上面了吗？