JS实现定制右键默认操作的方法

涉及到的方法有：

  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";

};