Js實現自定義右鍵行為

2024-05-06 16:17:42

字體：大中小

來源：轉載

供稿：網友

本文主要給大家分享的是一則javascript實現的自定義右鍵行為的小技巧，非常的簡單實用，有相同需求的小伙伴可以參考下。

自定義右鍵行為(通過事件對象獲得鼠標的坐標(x,y))

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>demo</title>

<style type="text/css">

html{

height:100%;

}

body{

height:100%;

}

#mydiv{

width:300px;

height:300px;

background-color: #ff7400;

}

#ctxMenu{

background-color: #ff7400;

list-style-type: none;

position: absolute;

padding:0px;

border:1px solid #000;

visibility: hidden;

}

</style>

</head>

<body>

<div id="mydiv"></div>

<h2 id="show"></h2>

<input type="text"id="txt"><span id="help"></span>

<ul id="ctxMenu">

<li>上傳</li>

<li>下載</li>

<li>新建</li>

<li>取消</li>

</ul>

<script type="text/javascript">

var $=function(id){

return document.getElementById(id);

};

var h2=$("show");

var ctx=$("ctxMenu");

var txt=$("txt");

var help=$("help");

/*

txt.onfocus=function(){

help.innerHTML="請輸入金額";

}

txt.onkeydown=function(event){

help.innerHTML="";

var code=event.keyCode;

if(!(code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190)){

event.preventDefault();

}

}

*/

document.body.oncontextmenu=function(event){

event.preventDefault();

var x=event.pageX;

var y=event.pageY;

ctx.style.left=x+"px";

ctx.style.top=y+"px";

ctx.style.visibility="visible";

}

document.body.onclick=function(){

ctx.style.visibility="hidden";

}

/*

document.body.onmousemove=function(event){

var x=event.pageX;

var y=event.pageY;

h2.innerHTML=x+":"+y;

}

*/

window.onbeforeunload=function(){

var v=$("txt").value;

if(v){

return "";

}

}

$("mydiv").onclick=function(){

$("show").innerHTML="click";

};

$("mydiv").ondblclick=function(){

$("show").innerHTML="dblclick";

};

$("mydiv").onmouseover=function(){

$("show").innerHTML="mouseover";

this.style.backgroundColor="#2d2d2d";

};

$("mydiv").onmouseout=function(){

$("show").innerHTML="mouseout";

this.style.backgroundColor="pink";

}

</script>

</body>

</html>