使用 contextmenu 事件控制右键菜单

在 web 页面中可以使用 contextmenu 事件控制右键菜单，且兼容所有主流浏览器。实现原理是绑定 contextmenu 事件，阻止浏览器的默认事件，显示你的自定义菜单（或者直接阻止，以达到屏蔽右键菜单的效果）。在线演示

关键代码如下：

<div id="div1" class="block">在此单击右键显示自定义右键菜单</div>
<div id="div2" class="block">此区域屏蔽右键菜单</div>
<ul id="menu">
  <li><a target="_blank" href="">KeenWon主页</a></li>
  <li><a target="_blank" href="demo/index.html">Demo</a></li>
</ul>

window.onload = function (e) {
  var div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2'),
    menu = document.getElementById('menu')

  addHandler(div1, 'contextmenu', function (e) {
    e = e || window.event
    preventDefault(e)

    menu.style.left = e.clientX + 'px'
    menu.style.top = e.clientY + 'px'
    menu.style.display = 'block'
  })

  addHandler(div2, 'contextmenu', function (e) {
    e = e || window.event
    preventDefault(e)
  })

  addHandler(menu, 'contextmenu', function (e) {
    e = e || window.event
    preventDefault(e)
  })

  addHandler(document, 'mousedown', function (e) {
    e = e || window.event
    var obj = e.srcElement ? e.srcElement : e.target
    if (isChild(menu, obj)) {
      return false
    }
    menu.style.display = 'none'
  })
}

function isChild(parent, child) {
  while (child != null) {
    if (child == parent) {
      return true
    }
    child = child.parentNode
  }
  return false
}

function addHandler(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false)
  } else {
    element.attachEvent('on' + type, handler)
  }
}

function preventDefault(e) {
  e = e || window.event
  if (e.preventDefault) {
    e.preventDefault()
  } else {
    e.returnValue = false
  }
}

其中涉及到的“javascript 事件”相关内容，可以查看：