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>반응형