Eventos e casos de movimento do mouse em JavaScript

1. Evento de clique do mouse

1. evento de clique onclick

Manipulador de evento para clique do mouse

<input type="button" id="bt" value="click">
<script>
//encontre o botão e defina o evento de clique
document.getElementById("bt").onclick = function (){ // pop-up após ser clicado Caixa pop-up alert("o botão foi clicado") }

</script>

2.ondblclick evento de clique duplo

Função de manipulação de eventos quando o mouse é clicado duas vezes

<input type="button" id="bt" value="click">
<script>
//Encontre o botão e defina o evento de clique duplo
document.getElementById("bt").ondblclick = function (){ //Duas vezes clicado Uma caixa pop-up de alerta("O botão foi clicado") aparece após os tempos } </script

3. evento de mouse pressionado onmousedown

Função do manipulador de eventos quando o mouse é pressionado

4. evento de liberação do mouse onmouseup

Função do manipulador de eventos quando o mouse é liberado

caso:

2. Evento de movimento do mouse

1. O evento
onmouseover é acionado quando o mouse se move sobre uma determinada tag HTML.

2. O evento onmouseout
é acionado quando o mouse se afasta da tag HTML

3. O evento de movimento
onmousemove é acionado quando o ponteiro do mouse se move sobre o elemento

4. O evento
mouseenter é o mesmo que onmouseover, mas o evento mouseenter só é executado uma vez

5. O evento
mouseleave é o mesmo que onmouseout, mas o evento mouseenter é executado apenas uma vez

2. Casos:

As renderizações são as seguintes:

O código completo é o seguinte:

<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标跟随</title>
		<style type="text/css">
			div{
				position: relative;
				width: 360px;
				height: 511px;
			}
			img{
				width: 360px;
				border-radius: 5px;/* 设置圆角 */
			}
			p{
				width: 100px;
				height: 30px;
				position: absolute;/* 绝对定位 */
				left: 0;
				top: 0;
				background-color: rgba(0,0,0,0.666);
				color: white;
				padding: 10px;
				display: none;/* 隐藏 */
				pointer-events: none;/* 不对鼠标事件作出反应 */
			}
		</style>
	</head>
	<body>
		<div id="div_1">
			<img src="img/1.jpg" alt="">
			<p>
				<strong>简介</strong>
				<span>买建材上京东！京东</span>
			</p>
		</div>
		<script type="text/javascript">
			//获取div标签
			var div_1 = document.getElementById("div_1");
			//给div_1绑定事件:onmouseover:鼠标移入事件
			div_1.onmouseover = function(){
				//将p标签显示出来，故需要将display的值设置为block
				document.querySelector("p").style.display = "block";
			}
			//onmouseout:鼠标从元素上移开时触发的事件
			div_1.onmouseout = function(){
				将p标签显示出来，故需要将display的值设置为none
				document.querySelector("p").style.display = "none";
			}
			//onmousemove:鼠标从元素上移动时触发的事件
			div_1.onmousemove = function(){
				document.querySelector("p").style.left =event.offsetX + "px";
				document.querySelector("p").style.top =event.offsetY + "px";
			}
		</script>
	</body>
</html>