使用 getElementById 禁用 link,其中有许多 link 可以单击
Disabling a link using getElementById where there are many links that could be clicked
document.getElementById("img1").addEventListener("click", function(event){
event.preventDefault()
});
我已经尝试了上面的 JavaScript,它确实禁用了 link,同时保留了我想要的右键和中键单击操作。
但是,我有很多 link,每个都有一个动态创建的 ID,我不知道如何将 ID 传递给上面的代码。
我试过以下方法:
HTML:
<a id="img' . $row["idImage"] . '" onClick="passID(this.id)" href="images/img01"><div></div></a>
JavaScript:
function passID(linkId) {
var imgid = linkId;
alert(imgid);
document.getElementById(imgid).addEventListener("click", function(event) {
event.preventDefault()
});
但它不会禁用 link。我发出警报,它确实 return 已点击 link 的正确 ID,但没有禁用它,所以我对如何从这里继续进行有点不知所措。
您可以删除不必要的 onClick 事件处理程序并直接使用此脚本显示 ID:
$(document).on('click', 'a', function () {
// event.preventDefault();
alert(this.id);
});
<div class="container">
<a id="displayed-id" href="images/img01">Click</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
如果您可以使用事件处理程序属性,只需使用 onclick="return false;"
即可。
<a href="https://www.google.com/" onclick="return false;">Clicking me wont redirect.</a>
如果您想使用 addEventListener()
,那么您需要能够区分不应重定向的元素。您可以使用像 a[id^="img"]
这样的 selector 到 select 所有 id
属性以 img
.
开头的锚元素
然后你需要 select 所有适用的元素,遍历它们,并添加事件侦听器。
document.querySelectorAll('a[id^="img"]').forEach(anchorElement => {
anchorElement.addEventListener('click', event => event.preventDefault());
});
<a href="https://www.google.com/" id="img1">Link 1</a>
<a href="https://www.google.com/" id="img2">Link 2</a>
尽管将 类 添加到您要防止重定向的锚标记和 select 那些可能会更干净并且更不容易出错。
document.querySelectorAll('.dont-redirect').forEach(anchorElement => {
anchorElement.addEventListener('click', event => event.preventDefault());
});
<a href="https://www.google.com/" class="dont-redirect">Link 1</a>
<a href="https://www.google.com/" class="dont-redirect">Link 2</a>
document.getElementById("img1").addEventListener("click", function(event){
event.preventDefault()
});
我已经尝试了上面的 JavaScript,它确实禁用了 link,同时保留了我想要的右键和中键单击操作。
但是,我有很多 link,每个都有一个动态创建的 ID,我不知道如何将 ID 传递给上面的代码。
我试过以下方法:
HTML:
<a id="img' . $row["idImage"] . '" onClick="passID(this.id)" href="images/img01"><div></div></a>
JavaScript:
function passID(linkId) {
var imgid = linkId;
alert(imgid);
document.getElementById(imgid).addEventListener("click", function(event) {
event.preventDefault()
});
但它不会禁用 link。我发出警报,它确实 return 已点击 link 的正确 ID,但没有禁用它,所以我对如何从这里继续进行有点不知所措。
您可以删除不必要的 onClick 事件处理程序并直接使用此脚本显示 ID:
$(document).on('click', 'a', function () {
// event.preventDefault();
alert(this.id);
});
<div class="container">
<a id="displayed-id" href="images/img01">Click</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
如果您可以使用事件处理程序属性,只需使用 onclick="return false;"
即可。
<a href="https://www.google.com/" onclick="return false;">Clicking me wont redirect.</a>
如果您想使用 addEventListener()
,那么您需要能够区分不应重定向的元素。您可以使用像 a[id^="img"]
这样的 selector 到 select 所有 id
属性以 img
.
开头的锚元素
然后你需要 select 所有适用的元素,遍历它们,并添加事件侦听器。
document.querySelectorAll('a[id^="img"]').forEach(anchorElement => {
anchorElement.addEventListener('click', event => event.preventDefault());
});
<a href="https://www.google.com/" id="img1">Link 1</a>
<a href="https://www.google.com/" id="img2">Link 2</a>
尽管将 类 添加到您要防止重定向的锚标记和 select 那些可能会更干净并且更不容易出错。
document.querySelectorAll('.dont-redirect').forEach(anchorElement => {
anchorElement.addEventListener('click', event => event.preventDefault());
});
<a href="https://www.google.com/" class="dont-redirect">Link 1</a>
<a href="https://www.google.com/" class="dont-redirect">Link 2</a>