如何使用事件处理程序,双击和按键?

时间:2016-06-15 21:37:30

标签: javascript jquery javascript-events event-handling keyboard-events

它说“双击这里”我试图让它正常运行。点击它然后应该说“你好!你按下了右键。现在你得到了我的秘密信息。按下键盘上的一个键!”。然后使用kepress创建另一条消息。我的两个偶数处理程序似乎都没有功能

window.onload = function(){
    function updateDocument(){
        $("#Document").html("Hello! You pressed the right button. Now you get my secret message. Press a key on the keyboard!");
        $("#Document").html("\n");
        $("#Document").html("\n");
    };      
    document.getElementById("here").addEventListener("dblclick", function(){
        updateDocument();
    });
    document.addEventListener("keypress", function(val){
        var x = val.keyCode;
        var letter = String.fromCharCode(x);        
        $("#Document").append(letter);
    })
};
<script type="text/javascript" src="triggered.js"></script>
<div id="trigger1" class="trigger"> 
    double click 
    <p id = "here"> Here! </p>
    <br>
    <p id ="Document"></p>
</div>

1 个答案:

答案 0 :(得分:0)

您的第二个和第三个.html(...)正在替换您以前的文字。 所以它在技术上有效。

这里工作正常。

 window.onload = function(){


        function updateDocument(){

            $("#Document").html("Hello! You pressed the right button. Now you get my secret message. Press a key on the keyboard!\n\n");

        };


        $("#here").on("dblclick", function(){
            updateDocument();
        });

        $(document).on("keypress", function(val){
            var x = val.keyCode;
            var letter = String.fromCharCode(x);        
            $("#Document").append(letter);
        })

    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id = "trigger1" class = "trigger"> double click 
        <p id = "here"> Here! </p>

        <br>
        <p id ="Document"></p>
    </div>