<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标右键事件</title>
<style>
* {
padding: 0;
margin: 0;
}
.box{
position: relative;
}
p {
height: 60px;
width: 220px;
background-color: #888888;
text-align: center;
line-height: 60px;
}
#ul {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #FF0000;
z-index: 2;
}
#ul li{list-style: none;}
</style>
</head>
<body>
<div class="box">
<p id="tar1">这里是一些内容1
</p>
<p id="tar2">这里是一些内容2
</p>
<p id="tar3">这里是一些内容3
</p>
<ul id="ul" style="display: none;">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script>
$(".box").on("contextmenu", function(){
return false;
})
var x,y;
$('.box').mousemove(function(e) {
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
// $(this).text(xx + '---' + yy);
x=xx;
y=yy;
});
var _this;
$("p").mousedown(function(e) {
console.log(e.which);
_this=$(this);
// //右键为3
if (3 == e.which) {
$("ul").show();
$("ul").css("top",y);
$("ul").css("left",x);
}
$(this).attr("contenteditable",true);
// var el = document.getElementById("#tar");
// var oMenu = document.getElementById("ul");
//
//
// el.oncontextmenu = function(e) {
//
// var _x = e.clientX,
// _y = e.clientY;
// oMenu.style.display = "block";
// oMenu.style.left = _x + "px";
// oMenu.style.top = _y + "px";
// }
else if (1 == e.which) {
$("#ul").hide();
}
})
$("#ul li").click(function(){
// console.log($(this).text())
$(_this).attr("contenteditable",true);
$(_this).focus();
$(_this).scrollLeft=700;
$("input").focus();//使input获取焦点
$("#ul").hide();
});
/*$('body').click(function(event){
getMousePos(event)
})
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
}*/
// $("ul").on("click","",function(){
// console.log(1);
// })
</script>
</body>
</html>
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
