自定义右键

<!DOCTYPE html>
<html>
<head>

<style>
*
{margin:0;padding:0;}
#right li
{
height
:30px;
width
:100%;
list-style-type
:none;
}
</style>



</head>
<body>
<textarea id="t" cols="50" rows="5"></textarea>


<ul id="right" style="display:none; position:absolute; border:solid 1px Gray;width:100px; height:200px;">
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
</ul>


<script type="text/javascript">



function mousePosition(ev) {

if (ev.pageX || ev.pageY) {

return { x: ev.pageX, y: ev.pageY };

}

return {

x: ev.clientX
+ document.documentElement.scrollLeft - document.body.clientLeft,

y: ev.clientY
+ document.documentElement.scrollTop - document.body.clientTop

};
}
document.oncontextmenu
= function stopDefault(e) {
// Prevent the default browser action (W3C)

var left = mousePosition(e).x + "px";
var top = mousePosition(e).y + "px";
var getD = document.getElementById("right");
getD.style.display
= "";
getD.style.top
= top;
getD.style.left
= left;
if (e && e.preventDefault) {
e.preventDefault();
}
// A shortcut for stoping the browser action in IE
else {
window.event.returnValue
= false;
}
return false;
}
onload
= function () {
var li = document.getElementById("right").getElementsByTagName("li");
for (var i = 0, len = li.length; i < len; i++) {
li[i].onmouseover
= function () {
this.style.background = "Gray";
};
li[i].onmouseout
= function () {
this.style.background = "White";
};
}
};

</script>
</body>
</html>

  

posted @ 2011-08-01 12:57  sirzxj  阅读(149)  评论(0编辑  收藏  举报