Making <img> clickable inside a <div> tag

Question

I currently have some trouble with IE11 and below.

I have a around a tag which looks like this:

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

And this is my 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();

what I want to have is that if you click on the image you can access the site. On every other browser it's working fine but not in IE 11 and below. Is it because he cant handle the data-href call?

I just tried to give it some z-index but without any effect.

Answer 1

Your data-href attribute is a custom data-* attribute. It's great if it works as you wish on other browsers (which I didn't know myself), but the data attributes are made to apply some data and trigger JS events in your HTML elements.

See CanIUse for compatibility

You could use a classic <a href="your/link.html"></a> or use the JS dataset API :

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

EDIT:
(Following the conversation in the comments of my answer)
Put the data-href to any element you want. Select elements with data-href attribute and apply the function to them. You will need to polyfill NodeList.prototype.forEach (document.querySelectorAll returns a NodeList for which forEach isn't supported by IE/Edge actually).

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

And then the 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;
    }
});