Question

我在锚元素中包含图像标记，如下所示：

<a href='$image'><img alt='No Image' src='$image'></a>

我发现如果图像不存在，我仍然可以点击链接。如果图像不存在，我想禁用链接。这样做的最佳方式是什么？

更新：

我在下面尝试过mplungjan的解决方案，但它没有用。如果javascript无法完成这项工作，我愿意尝试jquery。

Answer 1

禁用= true对我不起作用

这些（使用parentNode！）

InnerHTML和onclick：

<a href='#'><img alt='No Image' src='$image'
    onError="this.parentNode.onclick=function(){return false};
    this.parentNode.innerHTML='Image not available'"></a>

或删除它：

<a href='$image'><img alt='No Image' src='$image' 
onError="var lnk= this.parentNode; lnk.parentNode.removeChild(lnk)"></a>

或者替换它：

<a href='$image'><img alt='No Image' src='$image' 
onError="var lnk= this.parentNode;
lnk.parentNode.replaceChild(document.createTextNode('No image'), lnk)"></a>

DEMO

Answer 2

此版本有效：

<a href='$image'>
    <img alt='No Image' src='$image' onError="this.parentNode.onclick=function() {return(false);}">
</a>

您可以在此处看到它：http://jsfiddle.net/jfriend00/2jb4G/

或者，使用可在多个地方使用的常用功能：

<script>
function blockParentLink() {
    this.parentNode.onclick = function() {return(false);}
}
</script>

<a href='$image'>
    <img alt='No Image' src='$image' onError="blockParentLink()">
</a>

就个人而言，我认为如果它不显示而不是阻止点击，隐藏它可能是有意义的：

<a href='$image'>
    <img alt='No Image' src='$image' onError="this.parentNode.style.display = 'none';">
</a>

您可以在此处查看隐藏版本：http://jsfiddle.net/jfriend00/KVUUM/

Answer 3

这是我发现可能对您有用的一小段代码

<img src="http://www.someurl.com/image.gif" height="100" width="100" onerror="alert('Image missing')">

而不是ALERT，您可以调用jquery函数来删除超链接。如果您需要有关Jquery功能的帮助，请告诉我！

如果找不到图像，请禁用锚点或超链接

3 个答案: