点击和按键组合

Question

大家好，我正在尝试在我的功能上组合点击和按键，但到目前为止我尝试过的任何方法似乎都不起作用。 这是我的代码：

function victoryMessage() {

    $(document).off("keyup", handleKeyUp);
    $('#feedback').append("Bravo!<br><br><div id='replay' class='button'>Nastavi</div>");


    $('#replay').on("click",function () {
        if(questionBank.length>3) {
            gameScreen();
        }
        else {
            finalPage();
        }
    });

    $(document).off("tap", keepFocus).trigger("tap");
}

到目前为止，我已经尝试过以下操作：

$("#replay").on("click keyup", function (e) {
    if (e.type == "click" || e.keyCode == 13) {
        if(questionBank.length>0) {
            gameScreen();
        }
        else {
            finalPage();
        }
    }
});

和

var callback = function() {
    if(questionBank.length>0) {
        gameScreen();
    }
    else {
        finalPage();
    }   
};

$("#replay").keypress(function() {
    if (event.which == 13) callback();
});

$('#replay').click(callback);

和

$(document).on("keypress", function(e){
    if (e.which == 13) {
        testKey();
    }
});

我也尝试了其他一些方法，但似乎没有任何效果。在这里你可以看到我的完整代码http://www.wpacademy.nextweb.space/TestingMobile/
编辑：澄清安迪所说，我希望仅在单击重播按钮时单击进行注册，并在文档中的任何位置按下回车键时进行注册。

Answer 1

根据我的测试，您无法直接按下按钮，因此可能的解决方案如下

当用户在屏幕上的任意位置按 Enter 键时，将 alert 替换为您的函数调用。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

$("#replay").on("click", function(){
  function call
});

此外，为了避免您的代码一直在按键事件中运行，您可以检查屏幕上是否存在特定元素，例如重播按钮。

希望有帮助

Answer 2

我想这就是你所追求的。您希望仅在单击重播按钮时进行单击注册，并在文档中的任意位置按下回车键时进行注册。

$(document).on("click keypress", function (e) {      
  if (e.type === "click" && e.target && e.target.id === "replay") {
    e.preventDefault();  
    $("#output span").html("click happened");
  } else if (e.type === "keypress" && e.keyCode === 13) {   
    e.preventDefault();  
    $("#output span").html("enter key anywhere within document happened");
  }
});

#output {
  margin-top: 1em;
  padding: 0.5em 0.5em 0;
  border: 2px dashed gray;
  width: 300px;
  display: block;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="replay">replay button</button>
<div id="output">Event type: <span></span></div>

Answer 3

由于元素是通过 JS 创建的，因此将点击处理程序分配给 document 并将其推迟到 #replay。而且我不确定你打算如何在div 上捕获keyup，但如果你在div 上设置contenteditable，你可以双击文本，然后输入它以显示这两个事件是被俘虏。这是一个代码笔http://codepen.io/anon/pen/RpGEWK

$('#feedback').append("Bravo!<br><br><div id='replay' class='button' contenteditable>Nastavi</div>");
$(document).on("click keyup", "#replay", function(e) {
  console.log(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feedback"></div>