gpt4 book ai didi

javascript - 有没有办法为 HTML 页面中的所有按钮设置 onContextMenu 属性?

转载 作者:太空宇宙 更新时间:2023-11-04 03:20:45 25 4
gpt4 key购买 nike

我正在编写一个简单的 HTML 页面,它是一个表格中的按钮列表,每个按钮都是一个网站链接。我想要的是,当您左键单击一个按钮时,它会在同一窗口中打开链接,而当您右键单击它时,该链接会在新窗口中打开。

我已经完成了所有工作,如下所示。虽然它确实有效,但我正在尝试清理代码,因为这看起来可以更有效地完成,但我不确定如何做。现在,我必须手动将“onContextMenu”传递给每个按钮,并将 URL 写出两次。

有什么方法可以对此进行优化或清理代码以提高可读性和可维护性吗?

<script>
function RightClickFunction(url) {
//alert("You've tried to open context menu");
window.open(url);
return false;
}
</script>

...
...

<tr>
<td><form action="http://amazon.com"><input class="btn" type="submit" value="Amazon" onContextMenu="return RightClickFunction('http://amazon.com');"></form></td>
<td><form action="http://newegg.com"><input class="btn" type="submit" value="Newegg" onContextMenu="return RightClickFunction('http://newegg.com');"></form></td>
</tr>

编辑:

这是一个解决方案正在进行的工作。

<html>
<head>
<script>
var elems = document.querySelectorAll('input.btn');
console.log(elems);
for (var i = 0; i < elems.length; i++) {
console.log(elems[i]);
elems[i].oncontextmenu = function(e) {
return RightClickFunction(this.parentNode.getAttribute('action'));
}
}
function RightClickFunction(url) {
alert("You've tried to open context menu: " + url);
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td><form action="http://amazon.com"><input class="btn" type="submit" value="Amazon"/></form></td>
<td><form action="http://newegg.com"><input class="btn" type="submit" value="Newegg"/></form></td>
</tr>
</table>
</body>
</html>

最佳答案

当然,您可以选择所有输入,遍历它们并为每个输入添加事件监听器。

var elems = document.querySelectorAll('input.btn');
for (var i = 0; i < elems.length; i++) {
elems[i].oncontextmenu = RightClickFunction;
}

在这里查看它的实际效果(注意,我正在使用 form 操作属性(this.parentNode.getAttribute('action'))将 URL 分配给输入上下文菜单事件):

var elems = document.querySelectorAll('input.btn');
console.log(elems);
for (var i = 0; i < elems.length; i++) {
console.log(elems[i]);
elems[i].oncontextmenu = function(e) {
return RightClickFunction(this.parentNode.getAttribute('action'));

}
}

function RightClickFunction(url) {
alert("You've tried to open context menu: " + url);
//window.open(url);
return false;
}
<tr>
<td><form action="http://amazon.com">
<input class="btn" type="submit" value="Amazon" />
</form></td>
<td><form action="http://newegg.com">
<input class="btn" type="submit" value="Newegg" />
</form></td>
</tr>

关于javascript - 有没有办法为 HTML 页面中的所有按钮设置 onContextMenu 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27927300/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com