使 <img> 在 <div> 标签内可点击

Posted 2023-03-05

【中文标题】使 <img> 在 <div> 标签内可点击

【英文标题】：Making <img> clickable inside a <div> tag

【发布时间】：2018-03-06 14:08:40

【问题描述】：

我目前在使用 IE11 及以下版本时遇到了一些问题。

我有一个类似这样的标签：

<div class="cursor_pointer" data-href="/de/S/palettieren_umreifen/paletten/Paletten.html">
    <img title="Paletten"  src="/medias/sys_master/had/h00/8854080749598/8802146943006_SB50-D_1696_psd.png" />
</div>

这是我的 javascript：

sethrefs = function () 

if (document.querySelectorAll) 

    var datahrefs = document.querySelectorAll('[data-href]'),
            dhcount = datahrefs.length;

    while (dhcount-- > 0) 

        var ele = datahrefs[dhcount],
                link = function (event) 

                    var target = event.target,
                            leftclicked = ('buttons' in event && event.buttons === 1) ? true : 
                                                        ('which' in event && event.which === 1) ? true : 
                                                        (event.button === 1) ? true : false;

                    if (!event.target.href) window.location.href = this.getAttribute('data-href');

                ;

        if(ele.addEventListener) ele.addEventListener('click', link, false);
        else ele.attachEvent('onclick', link);

    

  
;

sethrefs();

我想要的是，如果您单击图像，您就可以访问该站点。在其他所有浏览器上它都可以正常工作，但在 IE 11 及更低版本中则不行。是因为他无法处理 data-href 调用吗？

我只是尝试给它一些 z-index，但没有任何效果。

【问题讨论】：

代码在哪里？？

不要担心快速downvotes，只需尝试发布代码:)

:) 看起来像什么？开玩笑，但如果有代码也不错。

从未听说过将data-href 自动解释为可点击元素。我认为你的 .cursor_pointer 元素有 javascript 代码，它会发挥作用。

为什么不使用a 而不是div 并使用CSS 将其转换为块？

【参考方案1】：

您的data-href 属性是一个自定义数据-* 属性。如果它在其他浏览器（我自己不认识）上按您希望的那样工作，那就太好了，但是数据属性被用来应用一些数据并触发 JS 事件您的 HTML 元素。 有关兼容性，请参阅 CanIUse 您可以使用经典的<a href="your/link.html"></a> 或使用JS dataset API：

var dataLinks = document.querySelectorAll('.cursor_pointer');
dataLinks.forEach(function (link) 
    link.onclick = function() 
        window.location.href = link.dataset.href;
    
);

编辑：（在我回答的 cmets 中进行对话之后） 将 data-href 放在您想要的任何元素上。选择具有data-href 属性的元素并将函数应用于它们。您将需要填充 NodeList.prototype.forEach（document.querySelectorAll 返回一个 NodeList，而 IE/Edge 实际上不支持 forEach）。

<!-- both div and img have the data-href attribute -->
<div class="cursor_pointer" data-href="/de/S/palettieren_umreifen/paletten/Paletten.html">
    <img data-href="/de/S/palettieren_umreifen/paletten/Paletten.html" title="Paletten"  src="/medias/sys_master/had/h00/8854080749598/8802146943006_SB50-D_1696_psd.png" />
</div>

然后是JS：

// NodeList.forEach isn't supported by MS browsers
if (!NodeList.prototype.forEach) 
    Object.defineProperty(NodeList.prototype, "forEach", 
        value: Array.prototype.forEach,
        enumerable: true,
        configurable: true,
        writable: true
    );


var dataLinks = document.querySelectorAll('[data-href]');
dataLinks.forEach(function (link) 
    link.onclick = function() 
        window.location.href = link.dataset.href;
    
);

【讨论】：

我让它完全像那样运行。但是如果我在图像旁边稍微点击一下，我只能进入另一个页面。不知何故，img 在没有任何 z-index 属性的 div 之上。我刚刚通过给我的 div 一些 z-index 对其进行了测试，因此它定义在 img 之上，但那也不起作用

我明白了.. 那是因为图像元素没有继承链接功能。我猜你最好使用<a>

可以用javascript继承吗？

您可以通过手动将cursor_pointer 类添加到子元素来应用此功能，或者通过在forEach 中选择它们（如var childElements = link.querySelectorAll('*');），然后在单击另一个嵌套时应用相同的功能forEach。我不确定它是否适用于 3 个嵌套元素。如果没有，您将需要创建一个递归函数。我会尝试，但我实际上是在打电话。

它与您的代码配合得很好 :) 干杯 @AymDev :)

【参考方案2】：

我的建议是将img 包装在a 元素中。

<div>
    <a href="link.html"><img src="yolo.jpg"></a>
</div>

【讨论】：

这也是我的第一个想法，但是其中运行了一个脚本来生成 data-href。关键是它可以在除 IE 11 及更低版本之外的所有其他浏览器上运行。在 Microsoft Edge 中它也可以正常工作。如果我在图片旁边单击一点，链接就可以正常工作了