鼠标按下并移动事件的解决方案
生活随笔
收集整理的這篇文章主要介紹了
鼠标按下并移动事件的解决方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
添加鼠標按下并移動事件的解決方案
<!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><style type="text/css">div {border: 1px solid #000;width: 250px;height: 100px;text-align: center;line-height: 100px;font-size: 40px;font-weight: bold;user-select: none;position: relative;}canvas {position: absolute;top: 0;left: 0;}</style> </head><body><div>特等獎<canvas width="250" height="100">當前瀏覽器版本不支持, 請更新瀏覽器</canvas></div><script type="text/javascript">// 獲取 畫布對象var canvas = document.getElementsByTagName("canvas")[0];// 獲取畫布上下文var ctx = canvas.getContext("2d");ctx.fillStyle = "#ccc";ctx.fillRect(0, 0, canvas.width, canvas.height);mouseDownAndMove(canvas, function(even) {// 畫布 覆蓋模式為, 覆蓋時,只保留 與新圖案不重疊的圖案, 即消除新圖案覆蓋的位置ctx.globalCompositeOperation = "destination-out";ctx.beginPath();ctx.arc(even.offsetX, even.offsetY, 10, 0, 2 * Math.PI, false);ctx.fill();});/*** 鼠標按下并移動事件* dom : 待綁定的dom 元素* callback: 鼠標按下并移動時 需要執行的函數*/function mouseDownAndMove(dom, callback) {let flag = false;let fn = function(e) {if (i) callback(e);};// 添加鼠標按下監聽dom.addEventListener("mousedown", function(even) {// 當鼠標按下時, 添加鼠標移動監聽flag = true;dom.addEventListener("mousemove", fn)})// 添加鼠標彈起監聽 , 即鼠標不在按下dom.addEventListener("mouseup", function() {// 此時移除 鼠標移動監聽,移除指定 事件函數i = false;dom.removeEventListener("mousemove", fn);})// 當鼠標在其他元素中彈起時的操作, 規避鼠標彈起后 dom 無法捕獲的異常document.addEventListener("mouseup", function() {// 此時移除 鼠標移動監聽,移除指定 事件函數flag = false;dom.removeEventListener("mousemove", fn);});}</script> </body></html>總結
以上是生活随笔為你收集整理的鼠标按下并移动事件的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Maya界面编程入门：在Maya中使用Q
- 下一篇： web指纹识别技术研究与优化实现