事件..案例-CSDN博客

本文链接：https://blog.csdn.net/AYBBZXY/article/details/134481785

本文介绍了JavaScript中鼠标事件（mouseover、mousemove、mousedown、mouseup）的应用，包括鼠标跟随元素移动、鼠标拖拽效果以及自定义右键菜单的实现，展示了如何利用CSS和JavaScript进行元素定位和交互设计。

摘要由CSDN通过智能技术生成

鼠标跟随

<style>
	*{
		margin:0;
		padding:0;
	}
	#box{
		width:200px;
		height:50px;
		backgroud:yellow;
		position:relative;
		margin:100px;
	}
	#box p{
		width:300px;
		height:200px;
		background-color:red;
		position:absolute;
		left:100px;
		top:100px;
		display:none;
		pointer-events:none;/* 穿透*/
	}
</style>


<body>
	<div id="box">
		zxy的头像
		<p>
			zxy的介绍
		</p>
	</div>
	<script>
		
		box.onmouseover = function(){
			this.firstElementChild.style.display="block"
		}
		box.onmouseout = function(){
			this.firstElementChild.style.display="none"
		}
		box.onmousemove = function(evt){
			//console.log("evt.offsetX,evt.offsetY")
			this.firstElementChild.style.left = evt.offsetX +5 + "px"
			this.firstElementChild.style.top = evt.offsetY +5 + "px"
		}
	</script>
</body>

在这里插入图片描述

鼠标拖拽

<style>
	*{
		margin:0;
		padding:0;
	}
	div{
		width: 100px;
		height: 100px;
		backgroud:skyblue;
		position: absolute;
		}
</style>


<body>
	<div id="box">

	</div>
	<script>
		box. onmousedown =function(){
			console.log("down")

			document. onmousemove function(){
				//console. log("move")
				var x = evt.clientX - box.offsetWidth/2
				var y = evt.clientY - box.offsetHeigth/2
				
				if(y<=0) y=0
				if(x<=0) x=0
				
				if(x>= document.documentElement.clientWidth-box.
				offsetWidth)
				X = document.documentElement.clientWidth-box.
				offsetWidth

				if(y>= document.documentElement.clientHeight-box.
				offsetHeight)
				y = document. documentElement.clientHeight-box.
				offsetHeight

				box.style.left = x + "px"
				box.style.top = y + "px"
			}
		}
		box. onmouseup =function(){
			console.log("up")

			document.onmousemove = null
		}

	</script>
</body>

<style>
	*{
		margin:0;
		padding:0;
	}
	div{
		width: 100px;
		height: 100px;
		backgroud:skyblue;
		position: absolute;
		}
</style>



<div id="box">

</div>
<script>
	isDown = false
	box.onmousedown = function () {
		console.log("down")
		isDown = true
	}
	box.onmouseup = function () {
		console.log("up")
		isDown = false
		// document. onmousemove = null
	}
	
	document. onmousemove = function (evt) {
		if (!isDown) return
		console.log("move")
		var x = evt.clientx - box.offsetWidth / 2
		var y = evt.clientY - box.offsetHeight / 2
		
		if (y <= 0) y = 0
		if (x <= 0) x = 0

		if (x >= document.documentElement.clientWidth - box.
		offsetWidth)
			x = document.documentElement.clientWidth - box.
			offsetWidth
		if (y >= document.documentElement.clientHeight - box.
		offsetHeight)
			y = document.documentElement.clientHeight - box.
			offsetHeight

		box.style.left = x + "px"
		box.style.top = y + "px"
	}
</script>

自定义右键菜单

<style>
	*{
		margin:0;
		padding:0;
	}
	ul{
		List-style: none;
		width: 200px;
		padding: 10px;
		border:1px solid black;
		display: none;
		position: absolute;
	}
	ul li:hover{
		background:skybule;
	}
</style>
		
<body>
	<ul id="list">
		<li class="aaa">111</li>
		<li class="bbb">222</li>
		<li class="ccc">333</li>
	</ul>
	<script>
		document. addEventListener("contextmenu", function(evt){
			evt. preventDefault()
			list.style.display = "block"
			var x = evt.clientx
			var y = evt.clientY
			if(x >=document.documentElement.clientWidth-list.offsetWidth)
			x = document.documentElement.clientWidth-list.offsetWidth

			if(y >=document.documentElement.clientHeight-list.offsetHeight)
			y = document.documentElement.clientHeight-list.offsetHeight
			list.style.left = x + "px"
			list.style.top = y + "px"
		})

		document.assEventListener("click",()=>{
			list.style.display = "none"
		})

	 	list.onclick = function(){
	 		console.log("list")
	 	}
	 	
	</script>
</body>