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放到您想要的任何元素上。选择具有data-href属性的元素并将该函数应用于它们。您需要填充NodeList.prototype.forEach（document.querySelectorAll返回NodeList，而实际上IE {Edge不支持forEach。

 <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/>

2 个答案: