自定义右键
<!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>