涉及到的方法有:
oncontextmenu:点击右键操作
preventDefault():阻止默认行为
思路:
点击右键,弹出窗口。取消默认弹出的网页显示的操作信息,变成定制的操作
可以事先在网页设置一个div,正常情况下隐藏不显示,点击的时候显示。
<div style="display:none;" id="menuId">
</div>
窗口的内容可以在点击的时候以div的形式动态增加
增加的方法为:
// 创建一个div元素, 里面放置一个文本
// @param parent :父元素
// @param text:div里面包含的文本
// @return : 新生成的div
// @param option {
// parent:xx
// text:xxx
//}
$.createDiv = function(option,handler){
var newDiv = document.createElement("div");
newDiv.style.width = "140px";
newDiv.style.padding = "10px";
newDiv.style.borderBottom = "1px dotted blue";
newDiv.style.fontSize = "12px";
newDiv.style.cursor = "pointer";
// newDiv.style.position = "absolute";
// newDiv.appendChild(document.createTextNode("增加用户(C)"));
newDiv.appendChild(document.createTextNode(option.text));
option.parent.appendChild(newDiv);
// 要做什么事情
// handler();
newDiv.onclick = function(){
handler();
};
//光标移动到时
newDiv.onmouseover = function(){
//背景颜色
newDiv.style.backgroundColor = "yellow";
};
鼠标离开后操作
newDiv.οnmοuseοut= function(){
//取消颜色
newDiv.style.backgroundColor = "";
};
return newDiv;
};
使用方法:
弹出窗口的属性设置:
//背景颜色
popWin.style.backgroundColor = "#a9a9a9";
//位置,可移动
popWin.style.position = "absolute";
// 显示隐藏窗口
popWin.style.display= "";
// 窗口的大小。默认时根据追加的内容变大
// popWin.style.left = "500px";
// popWin.style.top = "300px";
//设计弹出窗口的位置、点击事件的地方
// 必须要结尾
popWin.style.left = event.clientX + "px";
popWin.style.top = event.clientY + "px";
// 为了 在body里显示出来
document.body.appendChild(popWin);
注意,点击前,要先清空内容:
popWin.innerHTML = "";
点击别的地方,或者非右键操作时,取消弹出窗口:
// 当点击一个document的时候
document.onclick = function(){
// 让弹出窗口,取消掉
var popWin = $("#menuId");
//窗口隐藏属性
popWin.style.display = "none";
};