更多事件类型请查看：事件类型

鼠标事件

鼠标事件有三个：mousedown、mouseup、click
它们三个的执行顺序是：mousedown=》mouseup=>click

对mousedown和mouseup事件来说，event对象上会有一个button属性，表示按下或释放的是哪个按键。**DOM**为这个**button**属性定义了 3 个值：0 表示鼠标主键、1 表示鼠标中键（通常也是滚轮键）、2 表示鼠标副键。

  1. document.onmousedown = function (event) {
  2.   console.log(event.button);
  3. };

拖拽处理边界

  1. elDrag(document.getElementsByClassName("box")[0]);
  3. function elDrag(el) {
  4.   var offsetPos = null;
  5.   var wWidth = document.documentElement.clientWidth,
  6.       wHeight = document.documentElement.clientHeight,
  7.       elWidth = parseInt(window.getComputedStyle(el, null).width),
  8.       elHeight = parseInt(window.getComputedStyle(el, null).height);
  10.   el.addEventListener(
  11.     "mousedown",
  12.     function (event) {
  13.       offsetPos = {
  14.         X: event.offsetX,
  15.         Y: event.offsetY,
  16.       };
  17.       document.addEventListener("mousemove", mousemove, false);
  18.       document.addEventListener("mouseup", mouseup, false);
  19.     },
  20.     false
  21.   );
  22.   function mousemove(event) {
  23.     var elLeft = event.pageX - offsetPos.X,
  24.         elTop = event.pageY - offsetPos.Y;
  26.     // 判断元素是不是在文档的左面
  27.     if (elLeft <= 0) {
  28.       elLeft = 0;
  29.     } else if (elLeft >= wWidth - elWidth) {
  30.       // 判断元素是不是在文档的右面
  31.       elLeft = wWidth - elWidth;
  32.     }
  34.     // 判断元素是不是在文档的上面
  35.     if (elTop <= 0) {
  36.       elTop = 0;
  37.     } else if (elTop >= wHeight - elHeight) {
  38.       // 判断元素是不是在文档的下面
  39.       elTop = wHeight - elHeight;
  40.     }
  42.     el.style.left = elLeft + "px";
  43.     el.style.top = elTop + "px";
  44.   }
  45.   function mouseup() {
  46.     document.removeEventListener("mousemove", mousemove, false);
  47.   }
  48. }