使用CSS或JavaScript使图像周围的链接不可点击

Question

我有以下不能更改的标记。

<a href="link-to-somepage.html"><img src="link-to-image.jpg"></a>

有什么办法让我无法点击这些图片？ 我试过在img上将pointer-events设置为none ，但这不起作用。 将它们设置为none所有a标签将尽一切链接无法点击。

有什么办法让我仅使图像周围的链接不可点击？ 如果有的话，我更喜欢基于CSS的解决方案。 :)

Answer 1

如果您无法更改标记，请尝试使用jQuery 。 获取所有图像和所有经过a标签，其是的直接父images 。 并通过使用click事件处理程序preventDefault（） 。

$('img').parent('a').on('click', function(e){
   e.preventDefault();
   return false;
})

或@ t.niese在评论中所说的，您也可以使用

$(document).on('click', 'a:has(>img)' function(e){
       e.preventDefault();
       return false;
    });

有关更多信息，请参见示例

 $('img').parent('a').on('click', function(e){ e.preventDefault(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='www.google.com'>Google1</a> <br/> <a href='google.com'><img src='https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png' alt='an image'>Google 2</a> 

Answer 2

您可以这样做，将图像与pointer-events: none结合起来float pointer-events: none

随着图像的浮动，由于建立了BFC ，其父级将折叠为0，除非锚点在其上创建BFC ，否则锚点不会随其内容一起增长。

 a > img { float:left; pointer-events: none } 

 <a href="#" onclick="alert('click');"><img src="http://placehold.it/100x100"></a> 

如果要在流文本中使用它，如下所示，则需要将其包装在span 。

 a > img { float:left; pointer-events: none } span { display: inline-block; /* needed if its gonna be flowed with text */ } 

 Hey, here is a link with an image <span> <a href="#" onclick="alert('click');"><img src="http://placehold.it/100x30"></a> </span>, one which can't be clicked on 

Answer 3

您可以通过CSS类来做到这一点，也可以在您不想被点击的锚标记上使用该类

.no-click{
    pointer-events : none !important;
}

<a class="no-click" href="link-to-somepage.html"><img src="link-to-image.jpg"></a>

Answer 4

目前尚无办法在CSS中根据其子级选择父级。 由于您无法更改标记，因此JavaScript似乎是唯一的方法。

您想选择所有直接标记为图像的锚标记。 为了做到这一点，

1. 您必须首先选择所有父标记为锚标记的img标记
2. 遍历每个选定的img标签
3. 获取其父节点的句柄（这是一个锚标记）
4. 将href属性的值更改为“＃”

下面是一个纯JavaScript解决方案：

var imgs = document.querySelectorAll("a > img");
var a;
for(var i=0; i < imgs.length; i++){
  a = imgs[i].parentNode;
  a.href = "#";
}