티스토리 뷰

HTML&CSS&Javscript&Jquery

190826 마우스 이벤트

猫猫 2019. 8. 26. 21:48
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
	$(function(){
		//움직임들
		$("div").mouseenter(function(){
			$("h1").text("mouseEnter");
		});
/* 		$("div").mousemove(function(){ //1px라도 움직이면 moving만 보임
			$("h1").text("mouseMoving");//그래서 enter는 이제 안보임
		}) */
		
		$("div").mousemove(function(e){ 
			var x = e.pageX; //event 객체에서 마우스 움직임 x
			var y = e.pageY; //event 객체에서 마우스 움직임 Y
			$("h1").text("x:" + x+","+"y: "+ y);
			
		});
		
		$("div").mouseleave(function(){
			$("h1").text("mouseLeave");
		});
		
		$("html").mousemove(function(e){ //h1이 마우스 따라다님
			var x = e.pageX;
			var y = e.pageY;
			$("h1").css("top", y+"px");
			$("h1").css("left", x+"px");
		});
		
		/////////////////////////////////////////////////
		
		
		////click, doubleclick (퉁친거) 마우스 다운, 마우스온, 마우스업이벤트?
		
		//실제 기능이 발휘되기 전
		$("span").mousedown(function(){
			$(this).text("mouseDown");
		});
		
		//실제 기능이 발휘 된 후 (만약에 눌렀을때 를 구현할거면up때 구현해야함)
/* 		$("span").mouseup(function(){
			$(this).text("mouseUp");
		}); */
		/////////////////////////////////////////
		$("span").mouseup(function(e){
			$(this).text(e.button);
			//0,1,2,로 뜸 좌/휠/우
		});
		
		////우클릭 메뉴
		///이게 우클 하면 메뉴 뜨는 이벤트
		$(document).contextmenu(function(){
			return false; //이제 안나옴
		});
		
 		$("html").mousedown(function(e){
			if(e.button == 2){
				var x = e.pageX+10;
				var y = e.pageY+10;
				$("table").css("top",y+"px");
				$("table").css("left",x+"px");
				setTimeout(function(){
					$("table").css("top","-1000px");
					$("table").css("left","-1000px");
				},3000);
			}			
		});

		
	});
</script>
<style>

	h1{
		position: fixed;
		
	}
	div{
		width:200px;
		height:200px;
		border: black solid 3px;

	}
	span{
		font-size:30pt;
	}
	
	table{
		position:fixed;
		width:100px;
		height:200px;
		left: -1000px;
		top: -1000px;
	}
	
</style>
</head>

<body>
	<div></div>
		<h1> 결과 나올 데</h1>
	<span> hello world</span>
	
	<table border="1">
		<tr>
			<td>메뉴 1</td>		
		</tr>
		<tr>
			<td>메뉴 2</td>		
		</tr>
		<tr>
			<td>메뉴 3</td>		
		</tr>
	</table>	
	
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190826 셀렉트, 스크롤 바닥 됐을때 다음 내용 이어붙이기  (0) 2019.08.26
190826 키보드 이벤트  (0) 2019.08.26
190812 foreach 예제  (0) 2019.08.23
190819 reduce,map 예제  (0) 2019.08.23
190819 reduce  (0) 2019.08.23