鼠标事件深入
- 点击事件 = mousedown + mouseup
position: absolute会将内联元素变为块级（比如a）- a标签的协议限定符（伪协议，防止跳转和刷新，让href不生效），
javascript:;，可以让点击和拖拽分离 - 模块的声明：xx变量 = function () { } / IIFE
- 等待型模块和立即执行的模块
- 用按下、抬起的时间差值来判断是拖拽还是点击
边界问题
- 浏览器可能有计算误差，可以适当将范围缩小1像素，防止出现滚动条
鼠标点击
- 鼠标右键、中键没有onclick事件，有onmouseup事件
- e.button 左中右分别对应012
- IE10以上使用，否则就不要去添加这些事件了
- 鼠标右键事件contextmenu
- 模拟双击事件，两次点击的时间间隔 < 200ms
多人协作插件开发
- bind也可以，最简单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title>
</head><body><input type="text" id="input1"><input type="text" id="input2"><div class="btn-group"><button data-method="plus">+</button><button data-method="minus">-</button><button data-method="multi">*</button><button data-method="div">/</button></div><script src="../compat.js"></script><script src="js/index.js"></script><script>var oInput1 = document.getElementById('input1'),oInput2 = document.getElementById('input2'),btnGroup = document.getElementsByClassName('btn-group')[0];var calculator = new Calculator({oInput1,oInput2,btnGroup}).init()</script></body></html>
; (function () {var Calculator = function (opt) {this.oInput1 = opt.oInput1this.oInput2 = opt.oInput2this.btnGroup = opt.btnGroup}Calculator.prototype = {init: function () {this.bindEvent()},bindEvent: function () {var btns = this.btnGroupaddEvent(btns, 'click', this.compute.bind(this))},compute: function (e) {// this指向实例var num1 = parseInt(this.oInput1.value),num2 = parseInt(this.oInput2.value),e = e || window.event,tar = e.target || e.srcElementtagName = tar.tagName.toLowerCase();if (tagName === 'button') {var method = tar.getAttribute('data-method')switch (method) {case 'plus':console.log(num1 + num2)break;case 'minus':console.log(num1 - num2)break;case 'multi':console.log(num1 * num2)break;case 'div':console.log(num1 / num2)break;}}}}window.Calculator = Calculator})()
