存在则更新,不存在则创建
本帖最后由 Hangover 于 2022-1-29 19:27 编辑问题：想优化一下代码，让代码看起来更容易理解，大佬们有没有优雅一点的写法
代码思路：监听抬起鼠标左键后执行{
if (是否选中文本) {
if (按钮是否已存在) {
存在则删除
}
创建按钮
} else if (按钮是否存在) {
存在则删除
}
}document.addEventListener("mouseup", (event) => {
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
var TranslationButton = document.querySelector('#speech-translation');
var getSelection = window.getSelection().toString();
if (getSelection != '') {
if (TranslationButton) {
document.body.removeChild(TranslationButton);
}
TranslationButton = document.createElement("button");
document.body.appendChild(TranslationButton);
TranslationButton.style.left = left + 50 + "px";
TranslationButton.style.top = top + 0 + "px";
TranslationButton.id = "speech-translation";
TranslationButton.style.position = "fixed";
TranslationButton.innerHTML = '翻译';
TranslationButton.addEventListener('mouseup', function (e) {
e.stopPropagation();
});
TranslationButton.onclick = function () {
alert('666');
};
} else if (TranslationButton) {
document.body.removeChild(TranslationButton);
};
});
创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否可见。 管他存在不存在
一律删掉重建 document.addEventListener("mouseup", (event) => {
var TranslationButton = document.querySelector('#speech-translation');
var getSelection = window.getSelection().toString();
if (getSelection != '') {
if (!TranslationButton) {
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
TranslationButton = document.createElement("button");
document.body.appendChild(TranslationButton);
TranslationButton.style.left = left + 50 + "px";
TranslationButton.style.top = top + 0 + "px";
TranslationButton.id = "speech-translation";
TranslationButton.style.position = "fixed";
TranslationButton.innerHTML = '翻译';
TranslationButton.addEventListener('mouseup', function (e) {
e.stopPropagation();
});
}
TranslationButton.onclick = function () {
alert('666');
};
} else {
TranslationButton && document.body.removeChild(TranslationButton);
};
});
我觉得没必要每次都删除重建吧 本帖最后由 Hangover 于 2022-1-29 19:07 编辑
脚本体验师001 发表于 2022-1-29 18:37
我觉得没必要每次都删除重建吧
不删除重建的话 在下次选中文本的时候 按钮还是在原来的位置，你可以试试连续选中文本看看
你要是觉得我每次都用document.querySelector获取不如一开始直接赋值给变量，这也是我忽略的问题，已经改过来了，但重点不在那~
如果你希望按钮完成任务就消失，删除应该放在点击事件里吧，否则就改一下按钮位置不成吗 本帖最后由 Hangover 于 2022-1-29 20:16 编辑
脚本体验师001 发表于 2022-1-29 19:39
如果你希望按钮完成任务就消失，删除应该放在点击事件里吧，否则就改一下按钮位置不成吗 ...
如果我想点击多次呢？ 比如我那个语音翻译脚本里，翻译听一次不够，想多听几次是不是要重新选择文本？所以才把删除按钮放在取消选中文本事件中，只要文本是选中状态就能多次点击按钮语音翻译
Hangover 发表于 2022-1-29 20:13
如果我想点击多次呢？ 比如我那个语音翻译脚本里，翻译听一次不够，想多听几次是不是要重新选择文本？所以 ...
设一个变量存储选中的文本，就可以复读了嘛。取消选中的时候，按钮隐藏，文本变量清空。
下次再选中，文本变量赋值，按钮显示，这是个重复利用的过程，
总归觉得重复创建一个相同的按钮不太实际嘛 本帖最后由 Hangover 于 2022-1-29 23:43 编辑
cxxjackie 发表于 2022-1-29 22:50
创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否 ...
这看起来好像是优雅了一点点👍var TranslationButton = document.createElement("button");
document.body.appendChild(TranslationButton);
TranslationButton.id = "speech-translation";
TranslationButton.style.position = "fixed";
TranslationButton.style.display = 'none';
TranslationButton.innerHTML = '翻译';
TranslationButton.addEventListener('mouseup', function (e) {
e.stopPropagation();
});
TranslationButton.onclick = function () {
alert('666');
};
document.addEventListener("mouseup", (event) => {
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
var Translation = document.querySelector('#speech-translation');
var getSelection = window.getSelection().toString();
if (getSelection != '') {
Translation.style.display = 'block';
Translation.style.left = left + 50 + "px";
Translation.style.top = top + 0 + "px";
} else {
Translation.style.display = 'none';
}
});
cxxjackie 发表于 2022-1-29 22:50
创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否 ...
大佬还有别的方案吗
页:
[1]
2