IFE糯米学院-自定义鼠标右键

任务目的

1. 了解js中的oncontextmenu事件
2. 了解如何获取鼠标位置
3. 了解如何实现页面屏蔽右键菜单

任务要求

实现鼠标右击时，出现自定义菜单。点击非自定义菜单区域时，隐藏自定义菜单。参考样例（点击查看），实现页面开发，要求实现效果基本一致。
点击自定义菜单条目时，弹出菜单条目名称。

参考

oncontextmenu
event事件

思路 ps：代码真的是乱到眼瞎，哈哈，因为html结构不同，所以计算各种宽度的时候肯定也不一样

我的代码

1. 第一步，取消默认的右键菜单: 对点击框，监听contextmenu事件，然后preventDefault()阻止默认行为。这里，其实时候冒泡到body，但是就算冒泡到body，也只会产生一个右键菜单，所以确实不会有两个菜单出现，但是讲道理哦，应该阻止事件冒泡。stopPropagation(），可以在body上绑定一个contextmenu事件弹出一个alert框来验证。

冒泡：即事件从点击的目标，一级一级的向上冒泡，到window
捕获：即事件从点击的最高一级元素，一级一级向下捕获，直到目标
添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

1. 第二步，实现自定义菜单的显示隐藏。用一个showMenu()还有hidden()，然后主要是要说一下，就是应该实现的是，除了右键目标区域，其他地方，不管是用左键还是右键，这个菜单都会消失，所以，我是用了很笨的方法，就是给document绑定了click事件，以及contextmenu事件，都要隐藏，由于window监听了click，所以就不用单独给目标区域绑定click了。

2. 第三步：主要就是可视区宽度 鼠标位置 还有div离浏览器左边的距离，这个我的更复杂是因为由于我是相对于一个父元素定位，如果是相对于整个窗口定位，就要少考虑一点。

//父元素距离浏览器左边的距离
var offsetL = father.offsetLeft;
var offsetT = father.offsetTop;
//鼠标当前位置
var mouseLocaX = event.clientX;
var mouseLocaY = event.clientY;
//浏览器宽度
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
showMenu(show, [mouseLocaX, mouseLocaY, offsetL, offsetT, winWidth, winHeight]);

大概就是你加我你减的判断，画个图就很好理解了。
(图片出处)[http://www.2cto.com/kf/201409/333401.html]

• offsetTop offsetLeft…div 的边距离浏览器可视区的距离。

 //控制显隐
var showMenu = function(obj) {
    obj.style.display = 'block';

    //默认
    obj.style.left = arguments[1][0] - arguments[1][2]  + "px";
    obj.style.top = arguments[1][1] - arguments[1][3] + "px";
    //显示在右边还是左边
    if(arguments[1][4] - arguments[1][0] > 100) {
        obj.style.left = arguments[1][0] - arguments[1][2]  + "px";
    }else {
        obj.style.left = arguments[1][0] - arguments[1][2] - 100 + "px";
    }
    //显示在下边还是上边
    if(arguments[1][5] - arguments[1][1] > 90) {
        obj.style.top = arguments[1][1] - arguments[1][3] + "px";
    }else {
        obj.style.top = arguments[1][1] - arguments[1][3] - 90 + "px";
    }

}

这里看起来很复杂比较不干净，参考别人有一种写法就是，用if和else+switch来控制。相当于拼凑一个字符串，然后用switch来控制