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

Question

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

我有一个标签，看起来像这样：

<div class="cursor_pointer" data-href="/de/S/palettieren_umreifen/paletten/Paletten.html">
    <img title="Paletten" alt="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 但没有任何效果。

Answer 1

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

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

Answer 2

您的 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;
    }
});

编辑：
（根据我回答评论中的对话）
将 data-href 放入您想要的任何元素。 Select 个具有 data-href 属性的元素并将函数应用于它们。您将需要 polyfill NodeList.prototype.forEach（document.querySelectorAll returns a 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" alt="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;
    }
});

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

Making <img> clickable inside a <div> tag

html

css

image

href