// ==UserScript== // @name 网页亮暗模式切换 // @namespace https://bbs.tampermonkey.net.cn/ // @version 1.0.0 // @description 使用CSS滤镜快速切换网页风格 // @author 妄语 // @match *://*/* // @grant GM_addStyle // @grant GM_addElement // ==/UserScript== (function () { 'use strict'; // 注入样式，初始时不开启 GM_addStyle(` html.dark-mode { filter: invert(0.9) hue-rotate(180deg); background: #111 !important; } html.dark-mode img, html.dark-mode video { filter: invert(1) hue-rotate(180deg); } `); // 添加切换按钮 const toggleBtn = GM_addElement(document.body, 'img', { draggable: "false", src: 'data:image/png;base64,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', style: 'position:fixed;top:100px;left:20px;z-index:9999;border-radius:50%;cursor:pointer;width:40px;padding:5px;background-color:#323232bf', }); // 拖动 class DragMoveModel { startX = 0 // 按下的鼠标x值 startY = 0 // 按下的鼠标y值 moveInsX = 0 // 移动的x的值（从0开始累加） moveInsY = 0 // 移动的y的值（从0开始累加） isMousedown = false // 是否按下鼠标 isMousemove = false // 是否移动元素 targetEl = null // 目标元素 targetElTx = 0 // 目标元素的translate的x的值 targetElTy = 0 // 目标元素的translate的y的值 initTargetElTop = 0 // 目标元素的初始top值 initTargetElLeft = 0 // 目标元素的初始left值 limitMoveBorder = false // 限制移动边界 moveMode = 'transform' // transform为transform-translate方式移动，position为top,left方式移动 callback = null // 回调函数，用于获取鼠标移动距离 h5 = false // 是否用于h5 rootDom = document // 根文档 status = true onSrc = "data:image/png;base64,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" offSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAFM5JREFUeF7tnX+UJUV1x+/tmfdmd5HdWQKKuIlAVn6IWUJWAhGFAXSX2WG6ahaGRdTNIf44CERDJCIKJGAQkuWgR0RDNBoC5ghP5lX1wC4kEgdFCOACygFi0ATYIygIzIKwzMxO37wib2DYnR/93ut+fbuq+pz9a6vq3vu99Znq+7q7CsFfXgGvwKwKoNfGK+AVmF0BD4ifHV6BORTwgPjp4RXwgPg54BVoTgG/gjSnm+/liAIeEEcS7cNsTgEPSHO6+V6OKOABcSTRPszmFPCANKeb7+WIAh4QRxLtw2xOAQ9Ic7r5Xo4o4AFxJNE+zOYU8IA0p5vv5YgCHhBHEu3DbE4BD0hzuvlejijgAckp0T09PQuWLl26SxzHi4hoEQBM/TMevWT+IeJLQRC89Nxzz704MjLyck6uOm3WA5Jh+gcHBzu2bdu2b6lUejsRvR0AzL8DiegARNylEdNE9CIi/hcRPYSIDyPiQwDwcGdn5y8qlcpkI2P5tskV8IAk12q+lhiG4X5BEBxKRIci4qEA8IcAsHC+ji3+/zYAuJ+I7iGiuzs6Ou6pVquPAAC1OK7vDgAekBamQV9f39JSqXRybYJKAHgXALyhheHS7PpbALgDAG6YmJio3HTTTc+lObhLY3lAGsz24ODgkrGxsROCIFhHRMcgYmeDQ7S1ORFtB4Bba7d413d1dd1QqVS2ttWBghvzgCRMoJSyh4g+gYgDCbtwbabiOP5yFEXf5+ogJ788IHNko6enp3Px4sXrgiD4SwD4I06JS8GXe+M4vvz555+/bmRkxKwy/ppBAQ/IDKKY26jx8fHTAODPEfEtNs8cIvolIn65VCpd5W+/ds60B2SaJitXriwtW7bsk4h4HgAssRmMGWLbSkQXbt269Qq/orymjgekrkUYhmEQBJcBwNscA+N14RLRzxDxLKXUJpd1mIrdeUDCMNw/CIIrAeBYPyFep8CtcRyfFkXRz13WxVlAzFPuiYmJc4nor7n/VJvjBB0HgPOVUmZljXP0IzfTTgJy/PHH/15nZ+d3AcA87fbXPAoQ0R1ENBhF0ROuieUcIEKI9QDwFUTc1bVktxivecB4plLq2hbHKVR3lwAJhBDfQMRTC5UhZs4S0be01h9x5ZbLCUDCMNw1CIJhADiK2Xwrqju3xXHcH0XRC0UNIKnf1gMipfx9IroZEZcnFcW3m18BIvp5R0fHe4eGhh6bv3VxW1gNSBiGRyLiMCIuLm6K+HpORM8FQdBXrVbv5Otla55ZC4iU8oMAcE1r8vjeCRVYr5SyUmsrARFCnIKIJmFBwgT7Zq0pYJ6R/KmNv3BZB4iU8oTap63Xezham/FN9DaQvF8pZbS35rIKECFEPyJWAaDDmgwVK5BJRDyhWq3qYrk9u7fWAGLgAIAh/9pIvlPTfMEYBMGJtkBiBSBhGL4zCALzDXYp3+nhrdcVmJicnDxieHj4nqIrUnhA1qxZs2e5XP4pAOxR9GRY5v/T4+PjKzZu3PirIsdVaEAGBwfLExMTd9W31ylyHqz0nYjuK5fLh1cqFfNWcCGvQgMipTS/mAwWUnlHnCai67TWZmukQl6FBUQIcXZtd8INhVTdMafjOP5UFEWXFzHsQgIShuGKIAju8886CjPlzM+/K6vV6k8K43Hd0cIBUv8S8AGzx23RxHbZX7OncLlcXlG0fYQLB0htb4WLgiA43+XJVuDYL1RK/U2R/C8UIP39/QcEQfCAfxhYpCn2mq/1h4grqtXqw0WJoDCA1G+tNgPAwUUR1/s5owL3K6VWFuWLxMIAIqU8EwCu8JOu+AoQ0Rla668WIZJCALJq1apdFi1a9DgA7FYEUbPysb5NqDk4531Z2WjHuET0661bt+5dhFOzCgGIEOICRLywHcnjasPcvxPRnyDiOYh4Ilc/k/pVi+c8rfXFSdvn1Y49IOaQms7Ozi2NHlmWl6BZ2Y3j+NNRFG0QQlQsAeTF7du3/y73w33YAyKl/CIA/EVWE68I45pNJ7TWvcZXWwCp6365UupTnHPAGpAwDPcKguCXnAXM2jciMqvnCqXUqLElpbwOAE7K2m67xg+CYK+hoaEn22WvUTusAZFSfh4AzFEETl5TdUcURT+eEsCyFQSI6GKtNdscswWk/tzjKZd/uZqqO6b/dbANEAB4tlQqvZHrKyhsAZFSfggA/sXJpcOc4Tyt7rAcEBPeh7juiMIZEPO2rjln3LnLPO8ol8sHzXQkmoUriPljcJfW+nCOiWYJiBDiMET8T46CZe3TTHWHAyuICfEQpdT9Wevb6PhcAfkaIppDNJ27Zqo7XACEiK7UWpvXiVhdLAGRUj7jYnE+W93hAiAA8KRSai9WdAAAO0CEEO9BxB9wEyprf+aqOxwBxNQiR2itzfZNbC52gEgpvwQAn2SjUBscma/ucAUQAGD3ZJ0dIEKIJxFxzzbMSzYm5qs7HALkUaXUPmwSw+0WS0r5xwBg9rly5kpSdzgEiAn1nUop82Eci4vVCiKE+Fztc9q/ZaFMG5xIWne4BAgRnau1vrQN8icywQ2QGxGxL5HnBW/USN3hEiC15yG69jxEckkvN0Ced+V45kbqDscAeUop9SYPyA4KhGG4PAiCR7gIk6UfjdYdjgECQRDszeVwUDYriCsvJzZTd7gGCBGdrLU2373kfrEBRAhxJSKenrsiGTrQbN3hGiAA8CWl1FkZpiLx0JwAuQ0Rj0zseQEbNlt3OAjIvyulVnFIMRtApJSPAsBbOYiShQ+t1B0OAvKIUmq/LPLQ6JhsAKlt7RPXtvZh40+jQs7VvtW6wzVAzK1obUsgFsfpsZiQa9eufWscx2YFse5Ko+5wDRATbxzHb4mi6Im8JwQLQMIwPDIIgtvyFiML+2nUHS4CwuXNXhaACCHWI+LVWUzQPMdMq+5wFJAPaK3/Nc/8GdssAJFSngsAX8hbjDTt77ifVVpj27Yv1my6cHkniwUgQogNiHh2WpMo73HSrjscXUH+Tmv9mbxzyQIQKeVVAPCxvMVIy37adYejgHxVa31GWjlpdhwugFwDAB9sNghO/bKoOxwF5Fta6z/LO7csABFCfAcR1+UtRqv203zeMZsvNu6LNUus1yqlzOaBuV4ekBTlR8R3VavVO1MccqehhBAnIuI70rJBRF2ImPu9/o7xENG3tda531VwAeQfEfGjaSU9j3GyrDuyjEdKaY5C+3iWNpoZm4j+QWudu19cALmE41+xpInNuu5I6kej7cLamdpBEOhG+7WjPZdd37kAcnbtBKkN7RA+bRvtqDvS9tmMZ17vmZycNEdq75rF+CmMeZZSymwBlevFBZBTEfGbuSrRhPEsn3c04U7iLj09PZ3d3d3mzBHOR2qvV0qZXzdzvVgAwnmpnys7vu7Ibu4SUZ/WemN2FpKNzAWQI4IguD2Zyzxa+boj8zwcppS6O3Mr8xhgAUh/f/8BHR0dD+ctRlL7vu5IqlRL7ZbXnoP8oqURUujMApDe3t49urq6zHFr7C9fd7QtRUunDi5tm8UZDLEAxLxVLKWM8xQiqW1fdyRVqvl2RERa66D5EdLryQUQc/73I4i4PL3Q0h/J1x3pazrTiET0kNb6oPZYm9sKJ0CuRsT1HESZJWmznhvI1WfjVwGed+wkHxF9XWvN4u1uNoBIKY0g5rV3dpevO9qeklOVUv/cdquMaxAYGBh4BxE9wEGUHX3wdUd7s7J9+/b9brzxRhbb0LJZQUwKhBBbEXFxe9MxtzVfd7Q9G88opXZvu9VZDHIDZFPt+OfjuIjjn3fkkgmllBrIxTLnWyzjm5TyfAC4iIM4vu7IJwtE9Fda68vysb6zVVYrSH9//zEdHR23chEnAz8qSqmTMhj31SG5ft+RNGYu+2FN+csKkJ6engXd3d0v1lYRFg+Jkia1gXaZAlLUlz6n9DOrdrlcXlCpVCYb0DTTpqwAqRfq9yLiIZlGnd/gmQFSxOcdO6aBiH6ktX53fulhfotVB+SC2ibWF3ISKUVfrldKZbI5hRCi8H9YaivIebVNqy9OUe+Wh2K3gvT39+/T0dHxPy1HxnOATFaQotcdU6kKgmCvoaGhJzmljh0g9VXkTkQ8nJNQKfmSOiBFrzum1R8/1FqzO0CJKyCnI+KVKU1KTsOkCogNdcdUcuI4/lgURV/nlCzjC0tApJTdAPAbAOjgJliL/qQGSEG+K08q18Tk5GT38PDwS0k7tKsdS0Dqt1kRIva3S4g22UkNEFvqDqM7EX1Xaz3Yphw0ZIYzIKtrdcjNDUXDv3EqgNhSd0xL19FKqRGO6WMLiBFLSmne7k1tm00GCWgZEJvqjno+7lVKrWSQmxldYA1IfR/aClfxmvCrJUAsqztekY+IQq31cBNatqULa0Dqq8jPAIDFkcApZKQlQGyqO+pwPKi1Zn2HwB4QIUQhd12cBaamAbGw7jCrB4tzCOf6w8cekMHBwY7x8fHHEXGvFP6C5z1EU4BYWHeYPDymlNrH3GXlnZRCA1L/ydeWU3AbBsTGuqM+Idcppa7nDIfxjf0KMiWgEOJ2RDyCu6Dz+NcwILbVHfXa4/ta62OKkMvCABKG4f5BEDxY8KfrDQFiY90BAOap+f7Dw8P/6wFJWQEhxOWIeFbKw7ZzuMSAWFp3mML8Yq31ee0UvRVbhVlBTJCDg4NvmJiY+O/a/llvbiXoHPsmAsTWuoOItpTL5eWVSmU8xxw0ZLpQgJjIwjB8XxAE/9ZQlHwaJwLE0rrD/Fp1lNb6h3zSMb8nhQPEhCSlvKL2tu+Z84fHrsW8gFhad5hE/L1S6hx2GZnHoUICsnLlytKyZcs2I+IfFEzwOQGxuO64r1wuH8ppM4ak86aQgJjgBgYG9ovj+CeIuCBpsAzazQqIxXXHi+Zcd6XUowz0b9iFwgJiIhVCnIGIX2k46vw6zAqIjXVHXeaPKKX+KT/JW7NcaEDq9cg3AODDrcnQtt4z7mpi4VvLU4J+TSl1etvUzcBQ4QExm8wJIW5BxPdmoE/aQ+60glhcd9ystV7D/V2r+RJsAyCwatWqXRYuXPi9AuyEstMKYsN+VjtOMiL6QblcPq5SqWybbwJy/38rADEiG0gWLVp0GwCw/ToNAF63gthYdxDRXeVy+Wgb4DDzyhpATDCrV6/ebcGCBSOMf/59dQWxtO64u1QqHVupVH7LfWVI6p9VgJig+/r6lpZKpR8BwIFJRWhju1dWEEvrjnvHxsaO3rRp0/Nt1DNzU9YBYhTr7+/fvaOj4w4AeFvmCjZmoDI6OnpKd3f3jwHg4Ma68m1tjs4bHx9/t21wWHeLNX0KrV279s1xHBtI9mY0tcwGFGZDvI8z8qklV8yRzS+//PJ7brnllmdbGohpZytXkCmtBwYGDozj+C5E3JWD/kT0hCWfDk/J+UwQBCuHhoYe46BvFj5YDYgRLAzDI4Mg+I+Cf2iVRe5bGpOIxswXnkqpzS0NxLyz9YAY/Tmfwc58fszl3olKqRsK7H8i150ApA5JUV+RT5TINje6QCn1+TbbzMWcM4CYV1KklOZDq2NzUdoeo/N+02JPqJY9KJwvMb29vYu7urruA4B952vr/39GBe4vlUqHFemT2Vbz6NIK8opWYRiuqB2rYD626mxVPJf6184vN6cPH6i13uJS3M4BYpIrhLD5oNBM5i8RfVRrbT4tcOpyEhDzDpqU0txqWfM0O8tZS0S3aK2Py9IG17FdBcR8snugeQrMNTFc/CKiFyYmJvbbuHHjr7j41E4/nAXE//SbbJrFcfzpKIo2JGttXyunATFv/nZ2dj6KiIvtS20qET02Ojq6fGRkZHsqoxVwEKcBqRfs59R2Rrm0gLnL3GUiOllrfV3mhhgbcB6Q+namzwBAmXGe8nDtGaXU7nkY5mTTeUDqq8gQIg5wSkzevhDRVVrr0/L2I2/7HpD/fy6yDhG/k3cyONmvfSbQG0WRbcdwNyyxBwQAenp6FnR3d5sPfhY2rKCdHbZt2bJlyebNmyfsDC95VB6Q5Fr5lg4q4AFxMOk+5OQKeECSa+VbOqiAB8TBpPuQkyvgAUmulW/poAIeEAeT7kNOroAHJLlWvqWDCnhAHEy6Dzm5Ah6Q5Fr5lg4q4AFxMOk+5OQKeECSa+VbOqiAB8TBpPuQkyvgAUmulW/poAIeEAeT7kNOroAHJLlWvqWDCnhAHEy6Dzm5Ah6Qula9vb17dHV1HZRcOntbjo2NPbhp06an7Y0weWQekLpWUsqTanvPOr2Dx9S0ieP4pCiKzHFxzl8eEA/IThB4QF6TxAPiAfGAzLFOekA8IB4QD8j8t9K+BnlNI3+L5W+xdiLGA+IBmenPqL/F8rdY/hbL32L5W6z5FfAriF9B5pglUspeANjYyESyta3fdtTXIDvN7TAMDwmC4F5bJ30jccVxfHAURT9tpI+tbX0NUs/smjVr9iyXy0/amuhG4pqcnNxjeHj4N430sbWtB2RaZqWUvwaAN9qa7IRxPa2Ucl2DV6XygEybNUKIqxFxfcKJZGuzbyqlPmxrcI3G5QGZplgYhh8IguDaRkW0rP06pdT1lsXUdDgekGnSrV69ereFCxea49hcvpYqpUZdFmB67B6QHWaCEOJSRDzH0QlyiVLqs47GPmPYHpAdZOnt7V3c1dX1OAAscWyiPBvH8d5RFL3gWNxzhusBmUEeIUQ/AGhEdEIfIiIAWKW1/p6H4/UKODEBmkm6lPJ8ALiomb4F7PNZpdQlBfQ7c5c9IHNILIT4NiKeknkWcjRARNdorV3/aXvWDHhA5p6cKIT4AiJ+Jsc5nKVpU5R/DgDMLZa/ZlDAA5JgWgghTgSAaxBxQYLm7JsQ0RgAvF9rXWXvbM4OekASJqCvr2/fzs7OyxBxIGEXrs1uAICzlVKPcnWQk18ekAazMTAwcBQRfQIAzOvxCxvsnktzInoJEW9GxC9Wq9Xbc3GioEY9IE0mrqenZ8GSJUt6EfFQAHgTAPxO/dlJ3pqaemIrAJi3cZ8CgLtHR0dvHhkZebnJUJ3ulncynRbfB89fAQ8I/xx5D3NUwAOSo/jeNH8FPCD8c+Q9zFEBD0iO4nvT/BXwgPDPkfcwRwU8IDmK703zV8ADwj9H3sMcFfg/FKqwMknY9GEAAAAASUVORK5CYII=' constructor(config = {}, callback = () => { }) { this._initConfig(config) this._initEvent() this._initTragetElInfo() this.callback = callback } // 初始化配置_calcTargetTranlate _initConfig(config) { this.targetEl = config.targetEl || document.body this.limitMoveBorder = !!config.limitMoveBorder // this.moveMode = config.moveMode || 'transform' this.h5 = !!config.h5 this.rootDom = config.rootDom || this.rootDom } // 初始化目标元素相关信息 _initTragetElInfo() { if (this.targetEl) { const { top, left } = this.targetEl.getBoundingClientRect() this.initTargetElTop = top this.initTargetElLeft = left // this.targetEl.style['will-change'] = this.moveMode === 'transform' ? 'transform' : 'left, top' } } // 获取style的transform的属性值translate _getStyleTransformProp(transform = '', prop = 'scale') { transform = transform.replaceAll(', ', ',').trim() let strArr = transform.split(' ') let res = '' strArr.forEach(str => { if (str.includes(prop)) { res = str } }) return res } // 计算元素的translate的值 _calcTargetTranlate = () => { if (this.targetEl) { let translate = this._getStyleTransformProp(this.targetEl.style.transform, 'translate3d') if (translate.includes('translate3d')) { let reg = /\((.*)\)/g let res = reg.exec(translate) if (res) { translate = res[1].replaceAll(', ', ',') } let translateArr = translate.replace('(', '').replace(')', '').split(',') this.targetElTx = +translateArr[0].replace('px', '') || 0 this.targetElTy = +translateArr[1].replace('px', '') || 0 } } } // 设置transform属性 _setTransformProp(transform = '', prop = '', value = '') { let reg = new RegExp(`${prop}\((.*)\)`, 'g') if (transform.includes(prop)) { let propList = transform.replaceAll(', ', ',').trim().split(' ') let newPropList = propList.map(item => item.replaceAll(reg, `${prop}(${value})`)) transform = newPropList.join(' ') } else { transform = `${prop}(${value}) ` + transform } return transform } // translate移动元素 _translateMoveEl() { if (this.targetEl) { let tx = this.targetElTx + this.moveInsX let ty = this.targetElTy + this.moveInsY // 工具函数：限制移动边界 const limitBorder = () => { const { width, height } = this.targetEl.getBoundingClientRect() if (tx + width + this.initTargetElLeft > window.innerWidth) { // 限制右边界 tx = window.innerWidth - width - this.initTargetElLeft // 窗口宽度-元素宽度-元素初始时的左偏移距离 } if (tx < -this.initTargetElLeft) { // 限制左边界 tx = -this.initTargetElLeft } if (ty + height + this.initTargetElTop > window.innerHeight) { // 限制下边界 ty = window.innerHeight - height - this.initTargetElTop } if (ty < -this.initTargetElTop) { // 限制上边界 ty = -this.initTargetElTop } } if (this.limitMoveBorder) { limitBorder() } let transform = this.targetEl.style.transform transform = transform ? this._setTransformProp(transform, 'translate3d', `${tx}px, ${ty}px, 0px`) : `translate3d(${tx}px, ${ty}px, 0px)` this.targetEl.style.transform = transform } } // 使用top，left的方式移动元素 // _topLeftMoveTargetEl = () => { // let left = this.moveInsX + this.initTargetElLeft // let top = this.moveInsY + this.initTargetElTop // // 工具函数：限制移动边界 // const limitBorder = () => { // const { width, height } = this.targetEl.getBoundingClientRect() // if (top < 0) { // top = 0 // } // if (top > (window.innerHeight - height)) { // top = window.innerHeight - height // } // if (left < 0) { // left = 0 // } // if (left > (window.innerWidth - width)) { // left = window.innerWidth - width // } // } // if (this.limitMoveBorder) { // limitBorder() // } // this.targetEl.style.left = left + 'px' // this.targetEl.style.top = top + 'px' // } // 鼠标移动事件 _mousemoveHandler = (e) => { if (this.isMousedown && e.which !== 3) { const pageX = this.h5 ? e.changedTouches[0].pageX : e.pageX const pageY = this.h5 ? e.changedTouches[0].pageY : e.pageY this.isMousemove = true // 往左 if (pageX < this.startX) { this.moveInsX = pageX - this.startX } // 往右 if (pageX > this.startX) { this.moveInsX = pageX - this.startX } // 往上 if (pageY < this.startY) { this.moveInsY = pageY - this.startY } // 往下 if (pageY > this.startY) { this.moveInsY = pageY - this.startY } // console.log('moveInsX', this.moveInsX, 'moveInsY', this.moveInsY) // if (this.moveMode === 'position') { // this._topLeftMoveTargetEl() // } else { this._translateMoveEl() // } // 计算第三边的长度（勾股定理 a^2 + b^2 = c^2） let c = Math.round(Math.pow((this.moveInsX * this.moveInsX + this.moveInsY * this.moveInsY), 0.5)) this.callback(this.moveInsX, this.moveInsY, c) } } // 鼠标按下事件 _mousedownHandler = (e) => { //屏蔽右键点击 if (e.which !== 3) { const moveEvent = this.h5 ? 'touchmove' : 'mousemove' const upEvent = this.h5 ? 'touchend' : 'mouseup' this.rootDom.addEventListener(moveEvent, this._mousemoveHandler) this.rootDom.addEventListener(upEvent, this._mouseupHandler) const pageX = this.h5 ? e.changedTouches[0].pageX : e.pageX const pageY = this.h5 ? e.changedTouches[0].pageY : e.pageY this.startX = pageX // 记录鼠标起始位置x this.startY = pageY // 记录鼠标起始位置y this.moveInsX = 0 // 将x轴移动距离清零 this.moveInsY = 0 // 将y轴移动距离清零 this.isMousedown = true // 标记鼠标按下状态 this.isMousemove = false // 标记元素是否移动 // 计算目标元素的translate的值 this._calcTargetTranlate() // if (this.moveMode === 'position') { // this._initTragetElInfo() // } } } // 鼠标松开事件 _mouseupHandler = (e) => { this.isMousedown = false // 标记鼠标松开状态 this.startX = 0 // 将x轴鼠标起始位置清零 this.startY = 0 // 将y轴鼠标起始位置清零 this.destroy() if (!this.isMousemove) { this.status = !this.status this.targetEl.src = this.status ? this.onSrc : this.offSrc // this.targetEl.style.backgroundColor = this.status ? "#323232bf" : '#efb336bf' document.documentElement.classList.toggle('dark-mode') } } // 初始化监听事件 _initEvent() { const downEvent = this.h5 ? 'touchstart' : 'mousedown' // const moveEvent = this.h5 ? 'touchmove' : 'mousemove' // const upEvent = this.h5 ? 'touchend' : 'mouseup' this.targetEl && this.targetEl.addEventListener(downEvent, this._mousedownHandler) this.targetEl && this.targetEl.addEventListener('contextmenu', function (event) { event.preventDefault() }) // this.rootDom.addEventListener(moveEvent, this._mousemoveHandler) // this.rootDom.addEventListener(upEvent, this._mouseupHandler) } // 销毁方法 destroy() { const moveEvent = this.h5 ? 'touchmove' : 'mousemove' const downEvent = this.h5 ? 'touchstart' : 'mousedown' const upEvent = this.h5 ? 'touchend' : 'mouseup' // this.targetEl && this.targetEl.removeEventListener(moveEvent, this._mousedownHandler) this.rootDom.removeEventListener(downEvent, this._mousemoveHandler) this.rootDom.removeEventListener(upEvent, this._mouseupHandler) } } const moveModel = new DragMoveModel({ targetEl: toggleBtn, limitMoveBorder: true }) })();