Personnalisez le comportement du clic droit (obtenez les coordonnées de la souris (x, y) via l'objet événement)
<!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>
Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira.
Veuillez prendre un moment pour partager l'article avec vos amis ou laisser un commentaire. Nous vous remercierons sincèrement pour votre soutien !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
