当前位置：网站首页>Follow the mouse's angle and keyboard events

Follow the mouse's angle and keyboard events

2022-07-06 02:31:00 【MyDreamingCode】

One 、 Follow the mouse angel 

1. e.clientX    e.clientY： Coordinates relative to the viewable area of the browser window

 2. e.pageX     e.pageY： Coordinates relative to the document page

 3. e.screenX  e.screenY： Coordinates relative to the computer screen 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>angel</div>
    <script>
        var div = document.querySelector('div');
        document.addEventListener('mousemove',function(e) {
            div.style.top = e.pageY - 50 + 'px';
            div.style.left = e.pageX - 50 + 'px';
        })
    </script>
</body>
</html>

Two 、 Keyboard events

1. keyup： The keyboard bounced up 

document.addEventListener('keyup',function() {
    console.log(' The keyboard bounced up ');
})

2. keydown： Press the keyboard 

document.addEventListener('keydown',function() {
    console.log(' Press the keyboard ');
})

3. keypress： Press the keyboard （ Inside keyCode Case sensitive ASCII value , But the function key is not recognized ）

document.addEventListener('keypress',function() {
    console.log(' Press the keyboard ');
})

 

原网站

版权声明
本文为[MyDreamingCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140018232746.html

边栏推荐

猜你喜欢

随机推荐