Home > Article > Web Front-end > About the use of js mouse button events and keyboard button events

About the use of js mouse button events and keyboard button events

不言Original: 2018-06-30 11:26:221601browse

This article mainly introduces the usage of js mouse button events and keyboard button events. It summarizes and analyzes the common operation techniques of JavaScript for mouse and keyboard events in the form of examples. Friends in need can refer to the examples of this article.

Describes the usage of js mouse button events and keyboard button events. Share it with everyone for your reference, the details are as follows:

keydown, keyup, keypress: keyboard keys that belong to you

mousedown,mouseup: mouse keys that belong to you

When buttons When pressed, a keydown event occurs.

Keyup is triggered when the user lifts the key.

The complete key press process is divided into two parts: 1. Key press is pressed; 2. the button is released.

When the user presses the mouse button on this element, mousedown occurs

When the user releases the mouse button on this element, mouseup occurs

Example

1. Which mouse button was clicked

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>

2. What are the current mouse cursor coordinates

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看！</p>
</body>
</html>

3. What is the unicode code of the pressed key

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

4. What is the coordinate of the current mouse cursor relative to the screen

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

5. What are the current coordinates of the mouse cursor?

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

6. Is the shift key pressed?

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit键，点击你鼠标的左键</p>
</body>
</html>

7. What is currently clicked? Which element

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p>
<h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the calculation method of JS function call stack stack size

Implementation of JavaScript image amplification technology

The above is the detailed content of About the use of js mouse button events and keyboard button events. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About Nodejs server-side character encoding, decoding and garbled processingNext article：About Nodejs server-side character encoding, decoding and garbled processing

See more

About the use of js mouse button events and keyboard button events

Related articles