3,383
个编辑
小
→防止手贱点到回退按钮： // Edit via Wikiplus
标签：移动版编辑 移动版网页编辑 |
Salt lovely（留言 | 贡献） 小 （→防止手贱点到回退按钮： // Edit via Wikiplus） |
||
|
--{{用户:自由李代数/签名org}} 2020年12月16日 (三) 17:56 (CST)
:: {{回应}}，那几个锚点本身没有什么特殊点，所以没有必要劫持，不过自定义UI倒是可以写：
<div class="js"><pre>
$(function () {
for (let a of Array.from(document.querySelectorAll('.mw-rollback-link a'))) {
if (!a.hasAttribute('href')) { continue }
a.addEventListener('click', (ev) => {
ev.preventDefault()
confirmUI('确定要回退此页面吗？', (confirmed) => {
if (confirmed) { window.location.href = a.href }
})
})
}
/**
* 显示一个自定义确认框
* @param {string} text
* @param {(confirmed:boolean)=>void} callback
*/
function confirmUI(text = '', callback) {
// 安全锁，防止用户多次点击
let safe = true
// 容器
let container = document.createElement('div')
container.className = 'confirmUIcontainer'
container.innerHTML = `<center>${text}</center>`
// 确定按钮
let yesBtn = document.createElement('div')
yesBtn.className = 'btn'
yesBtn.style.setProperty('--hover-color', '#FDF6E6')
yesBtn.textContent = '确定'
yesBtn.addEventListener('click', () => {
if (safe) {
safe = false // 安全锁
callback(true)
selfRemove() // 移除确认框
}
})
container.appendChild(yesBtn)
// 取消按钮
let noBtn = document.createElement('div')
noBtn.className = 'btn'
noBtn.style.setProperty('--hover-color', '#FDF6E6')
noBtn.textContent = '取消'
noBtn.addEventListener('click', () => {
if (safe) {
safe = false
callback(false)
selfRemove()
}
})
container.appendChild(noBtn)
// 关闭按钮
let closeBtn = document.createElement('div')
closeBtn.className = 'close'
closeBtn.textContent = '×'
closeBtn.addEventListener('click', () => {
if (safe) {
safe = false
selfRemove()
}
})
container.appendChild(closeBtn)
// 显示UI
container.style.opacity = '0'
container.style.top = '20%'
container.style.transitionTimingFunction = 'ease-out'
document.body.appendChild(container)
// 调整位置
container.style.marginLeft = (container.offsetWidth * -0.5) + 'px'
container.style.marginTop = (container.offsetHeight * -0.5) + 'px'
container.style.transitionDuration = '.3s'
container.style.opacity = '1'
container.style.top = '50%'
setTimeout(() => { container.style.transitionTimingFunction = 'ease-in' }, 400)
/**移除自己 */
function selfRemove() {
container.style.top = '20%'
container.style.opacity = '0'
setTimeout(() => { container.remove() }, 400)
}
}
// CSS
let s = document.createElement('style')
s.textContent = `
.confirmUIcontainer{
position: fixed;
border: 8px solid #0003;
border-radius: 8px;
overflow: hidden;
padding: 0;
top: 50%;
left: 50%;
min-width: 20vw;
background: #fbf2dc;
user-select: none;
}
.confirmUIcontainer > center{
padding: 1.2rem .6rem 1.2rem .6rem;
font-size: 1.05rem;
}
.confirmUIcontainer .btn{
width: 50%;
border: 1px solid #ccc;
padding: 1rem;
box-sizing: border-box;
font-size: 1.15rem;
line-height: 1.15rem;
float: left;
background-color: transparent;
text-align: center;
transition: .3s ease;
cursor: pointer;
}
.confirmUIcontainer .btn:hover{
background-color: var(--hover-color,transparent);
}
.confirmUIcontainer .close{
position: absolute;
width: 2rem;
height: 2rem;
top: 0;
right: 0;
font-size: 2rem;
line-height: 2rem;
text-align: center;
}
`
document.head.appendChild(s)
})
</pre></div>
: <span style="color:#0000;background-image:linear-gradient(345deg, #596ca6,#609f9f, #596ca6,#609f9f);background-clip:text;-webkit-background-clip:text;font-weight:bold;font-family:PRISTINA,'Microsoft Yahei',Lora;font-size:1.15rem" salt>-- [[用户:Salt_lovely|'''{{font|color=#0000|Salt lovely}}''']]{{font|size=.5rem|「[[用户讨论:Salt_lovely|{{font|color=#0000|非谢家之宝树}}]]，[[特殊:用户贡献/Salt_lovely|{{font|color=#0000|接孟氏之芳邻}}]]」}}</span> 2020年12月16日 (三) 19:30 (CST)
| |||