Question

可能是一个非常简单的javascript注入问题，但是我说有一个图像html标记：

<a href="myfile.htm"><img src="rainbow.gif"></a>

我想执行一个javascript，这样当点击图片时，它不会转到myfile.htm。换句话说，我想剥去围绕img的href。我怎么能用javascript做到这一点？假设我有以下内容来引用图片标记：

document.elementFromPoint(%f, %f)

f可以替换为任何double / float值

Answer 1

如果您对img元素有引用，那么它的父元素（parentNode）将是链接（在您给出的结构中）。三个选项：

完全删除链接
停用链接
更改链接的href

1。完全删除链接

您可以完全删除链接：

var link       = img.parentNode,
    linkParent = link.parentNode;
linkParent.insertBefore(img, link);
linkParent.removeChild(link);

使用parentNode查找父母和祖父母，insertBefore移动图片，removeChild删除链接。请注意，这假设图像是链接中的唯一内容。

2。禁用链接

如果你想保留链接但是没用它，你可以这样做：

var link = img.parentNode;
if (link.addEventListener) {
    link.addEventListener("click", function(event) {
        event.preventDefault();
    }, false);
}
else if (link.attachEvent) {
    link.attachEvent("onclick", function() {
        return false;
    });
}
else {
    link.onclick = function() {
        return false;
    }
}

3。更改链接的`href`：

这很简单，只需将链接元素的href属性（您可以获取，因为它是图像的父节点）设置为您想要的任何属性：

img.parentNode.href = /* ...something else */;

例如：

img.parentNode.href = "http://stackoverflow.com";

...会将链接更改为指向Stack Overflow。

Live example

一些参考文献：

Answer 2

<a id="anchorWithImage" href="myfile.htm"><img src="rainbow.gif"></a>

为什么不抓住锚，然后将其href设置为空：

var a = document.getElementById("anchorWithImage");
a.href = "javascript:void(0)";

或者抓住它并设置其click事件以取消默认操作，即浏览到其href属性的位置

a.onclick = function(e) {
   e.preventDefault();
}

或者你想抓住所有将图像作为子元素的锚点，并去除它们的href？

jQuery会让这很容易，如果这是你的选择

$("a").filter(function() {
    return $(this).children("a").length === 1;
}).attr("href", "javascript:void(0)");

或

$("a").filter(function() {
    return $(this).children("a").length === 1;
}).click(function() { return false; });  //returning false from jQuery handlers
                                         //prevents the default action

修改

如果您要对图像进行引用，并希望设置其父级锚点的href，则可以使用parentNode属性获取它：

var img = document.getElementById("imgId"); var a = img.parentNode; a.href = "javascript:void(0)";

Answer 3

您可以在窗口加载本身上更改标记的href，因此单击它时无需担心。

window.onload = fundtion(){
var imgs = document.getElementsByTagName('img');
 for(var i=0;i<imgs.length;i++){
   var parentElem = imgs[i].parentNode;
   if(parentElem.tagName === 'A') 
   parentElem.setAttribute("href", "javascript:void(0)");
 }
};

Answer 4

使用jQuery，您可以使用与此类似的东西

$("a").has("img").click(function(e).preventDefaults();});

基本上所有这一行都标识了包含标签的文档中的所有标签禁用标准事件过程

Answer 5

根据您对其他答案的评论，听起来您实际上想要更改/消除页面中特定位置的链接目标。你可以这样做：

var el = document.elementFromPoint(10, 10);

while(el) {
    if(el.nodeName.toLowerCase() == 'a')
        el.href = 'javascript:';

    el = el.parentElement;
}

这将从所选元素循环，识别元素是否为锚点，并将href设置为无效的元素。

使用javascript更改/剥离图像指向的URL

5 个答案:

1。完全删除链接

2。禁用链接

3。更改链接的`href`：

使用javascript更改/剥离图像指向的URL

5 个答案:

1。完全删除链接

2。禁用链接

3。更改链接的href：

3。更改链接的`href`：