生活随笔
收集整理的這篇文章主要介紹了
DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
鼠標事件深入
- 點擊事件 = mousedown + mouseup
- position: absolute 會將內聯元素變為塊級（比如a）
- a標簽的協議限定符（偽協議，防止跳轉和刷新，讓href不生效），javascript:;，可以讓點擊和拖拽分離
- 模塊的聲明：xx變量 = function () { } / IIFE
- 等待型模塊和立即執行的模塊
- 用按下、抬起的時間差值來判斷是拖拽還是點擊
邊界問題
- 瀏覽器可能有計算誤差，可以適當將范圍縮小1像素，防止出現滾動條
鼠標點擊
- 鼠標右鍵、中鍵沒有onclick事件，有onmouseup事件
- e.button 左中右分別對應012
- IE10以上使用，否則就不要去添加這些事件了
- 鼠標右鍵事件contextmenu
- 模擬雙擊事件，兩次點擊的時間間隔 < 200ms
多人協作插件開發
<!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
})()
總結
以上是生活随笔為你收集整理的DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
