javascript - 自定义右键单击锚标记以在新选项卡中打开链接
问题描述
<a>
我有下面的代码来打开元素的特定右键菜单。
在我右键单击并单击以在新选项卡中打开的任何链接上,它只会打开第一个链接。java脚本中的计数器与我无法这样做有关。
我想右键单击每个链接,以便通过从元素中href
获取链接在新选项卡中打开该链接。<a>
如果有人有另一个脚本,当然应该更好地用于此目的,请与我分享。
谢谢。
从数据库中获取链接
$i =1;
$get_newbooks = mysqli_query($dba, "select * from mynewbooks
where status = 1
");
while ($thisbook = mysqli_fetch_array($get_newbooks)) {
?>
<a href="<?php echo $thisbook['link']; ?>" id="openinnewtabt<?php echo $i++; ?>">
<?php echo $thisbook['name']; ?>
</a>
}
标签的右键菜单
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;"
class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
CSS
.show {
z-index: 10000000000000;
position: absolute;
background-color: #C0C0C0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
Javascript
$(document).ready(function() {
$('body').on('contextmenu', 'a', function() {
var counter = 1;
$('.opennewtabt').on('click', function() {
var link = $('#openinnewtabt'+counter).attr('href');
window.open(link, '_blank').focus();
return false;
});
document.getElementById("rmenu").className = "show";
document.getElementById("rmenu").style.top = mouseY(event) + 'px';
document.getElementById("rmenu").style.left = mouseX(event) + 'px';
window.event.returnValue = false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
return null;
}
}
解决方案
您在处理程序中设置click
处理contextmenu
程序...
相反,您应该将它放在外面并将 传递href
给上下文菜单内的按钮。
这可以使用.data()来完成。
所以你只是不需要任何id
链接......而且没有counter
。
$(document).ready(function() {
// Context menu open
$("body").on("contextmenu", "a", function() {
// pass the href to the context menu button
$(".opennewtabt").data("href", this.href)
$(".opennewtabt").text($(this).text() + " in a new window")
// document.getElementById("rmenu").className = "show";
// document.getElementById("rmenu").style.top = mouseY(event) + "px";
// document.getElementById("rmenu").style.left = mouseX(event) + "px";
// With jQuery, the 3 lines above can be writen like this
$("#rmenu").removeClass("hide").addClass("show").css({"top":mouseY(event) + "px", "left":mouseX(event) + "px"})
window.event.returnValue = false;
});
// Context menu click handler
$(".opennewtabt").on("click", function(e) {
var link = $(e.target).data("href")
window.open(link, "_blank").focus();
return false;
});
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return (
evt.clientX +
(document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft)
);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return (
evt.clientY +
(document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop)
);
} else {
return null;
}
}
.show {
z-index: 10000000000000;
position: absolute;
background-color: #c0c0c0;
border: 1px solid grey;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li {
list-style: none;
}
.show a {
border: 0 !important;
text-decoration: none;
}
.show a:hover {
text-decoration: underline !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">
test link 1
</a><br>
<a href="http://test.com">
test link2
</a><br>
<a href="http://hello.com">
test link3
</a><br>
<div class="hide" id="rmenu">
<ul>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
<li>
<button style="text-align: center; color: black; width: 150px;" class="opennewtabt item copy-button">
Open Link In New Tab
</button>
</li>
<hr style="margin-top: 3px; margin-bottom: 0px; border: 1px solid black;">
</ul>
</div>
由于window.open
不允许在 SO 代码段中使用,请查看CodePen
推荐阅读
- vue.js - 创建highcharts vue组件
- java - 从另一个 Jar (Maven) 添加属性文件
- java - androidTest运行时如何发送模拟位置坐标?
- angular - Primeng:多选未填充
- javascript - 在文本中输入带有 HTML 标记的 Writer 效果
- php - 在 jpgraph PiePlot 中显示百分比和绝对值
- r - 基于字符串检测创建(并填写)新列
- wordpress - 如何使用 Postman 使用 Wordpress REST API v2 将元字段添加到媒体?
- javascript - (点击)事件不适用于页面上的大多数元素 - Ionic 4
- python - 带网格搜索的火车