javascript - 使用相同的键触发网站中的两个不同操作 - TamperMonkey - JavaScript
问题描述
我创建了一个 TamperMonkey 脚本来修复一些错误并在我作为安全专家工作的网站上创建快捷方式。
W
一种操作是使用和键打开某些图像E
。这些图像在页面加载时显得很小,当点击时,它们会放大显示,所以我可以阅读上面的内容。
问题是,要再次关闭它们,我必须手动单击一个 X 按钮,该按钮已设置为TAB
键。
如果再次按下打开图像的同一个键将其关闭会更容易。
这是我目前使用的脚本。
// ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
(function(){
document.addEventListener('keydown', function(e) {
if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img").click(); // this will trigger the click event and load the image in bigger size
}
}, false);
})();
// ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
(function(){
document.addEventListener('keydown', function(e) {
if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img").click(); // this will trigger the click event and load the image in bigger size
}
}, false);
})();
// ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
(function(){
document.addEventListener('keydown', function(e) {
// pressed TAB
if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click(); // this will trigger zoomed in media to be closed
}
}, false);
})();
我不是开发人员;我是一名摄影师,担任 CSA/安全专家,而我的国家的大流行仍然很严重。
任何帮助将非常感激!
解决方案
如果您的代码添加了一个类来缩放图像或直接更改图像的样式,您可以检查并触发单击图像或按钮。
另一种方法是将缩放的图像存储在列表中并对其进行检查以触发适当的点击:
const trigger = (img) =>
{
if (!img || trigger.list.get(img)) //is img was previously zoomed?
{
if (img)
trigger.list.delete(img);
else
trigger.list.clear();
if (img !== false) // if false it was called from onclick of the reset button
document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click();
}
else
{
trigger.list.set(img, 1); //store image in the map
img.click();
}
};
trigger.list = new Map();
// ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
(function() {
document.addEventListener('keydown', function(e) {
if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img"));//this will trigger the click event and load the image in bigger size
}
}, false);
})();
// ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
(function() {
document.addEventListener('keydown', function(e) {
if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img")); // this will trigger the click event and load the image in bigger size
}
}, false);
})();
// ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
(function() {
document.addEventListener('keydown', function(e) {
// pressed TAB
if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
trigger(); // this will trigger zoomed in media to be closed
}
}, false);
})();
img {
width: 100px;
}
<div id="root">
<div class="_207u8cFhj1qJCuOVY3G3XU">
<div class="_22c-iquDGgsWF7kWWz--mz">
<div class="_2-Lr5G9MaWKGAeCMsEEoBi">
<div>
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
</div>
<div>
<img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
</div>
</div>
</div>
</div>
<div class="_1qw_lOmwJT6xuZplKq1ilH">
<div class="_26T7BbVDhm0i411GqTgBgr">
<div>
<button onclick="document.querySelectorAll('img').forEach(e=>e.style.width='100px');trigger(false)">reset</button>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 没想到const在eval$之前改成了null
- amazon-ec2 - 如何在 AWS 上自动扩展 Kubernetes 工作节点
- performance - Neo4j 3.5 - 在我的 12B 关系图上仅搜索关系非常慢 - 如何提高性能?
- wordpress - 使用选项树插件的 create_function() 已折旧
- react-native - 如何在 Visual Studio Code 中调试 react-native
- java - 在 Windows 10 上执行可运行 jar 文件的问题
- c# - 使用现有列表中特定索引处的元素创建一个新列表
- c# - 协助在 C# 中设置类和对象
- jquery - ESRI Javascript API 中的 jQuery 自动完成:数组显示重复值
- jquery - Jquery 没有加载 laravel 5.7