Js Li Tag Onclick Not Working on Ie8

JS li tag onclick not working on IE8

IE8 and earlier don't have addEventListener, but they do have its non-standard predecessor, attachEvent. They're not quite the same.

Here's a "hook this event" function that uses what's available:

var hookEvent = (function() {
    var div;

    // The function we use on standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // The function we use on browsers with the previous Microsoft-specific mechanism
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    // Polyfill for preventDefault on old IE
    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    // Polyfill for stopPropagation on old IE
    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    // Return the appropriate function; we don't rely on document.body
    // here just in case someone wants to use this within the head
    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

Then you'd use it like this in your example:

hookEvent(document.getElementById("hd_vertical"), "click", function(e) {
    // ...
});

Note how it provides the missing preventDefault and stopPropagation functions on the event object on browsers using attachEvent and ensures that this within the handler call is what it would be if you were using addEventListener.

There are various aspects of event normalization that the above does not do:

1. It doesn't guarantee the order in which the handlers will run (attachEvent does them in the opposite order to addEventListener)

2. It doesn't handle issues around e.which vs. e.keyCode and such

...and of course, I haven't provided a detach event function. :-) For things like that, look at using a library like jQuery, YUI, Closure, or any of several others.

---

Side note: As adeneo pointed out in a comment on the question, IE8 also doesn't support getElementsByClassName. But it does support querySelectorAll and querySelector, so change:

var _url = document.getElementsByClassName(id)[1].getAttribute('href');

to

var _url = document.querySelectorAll("." + id)[1].getAttribute('href');

Note that that will try to get the second element matching the selector. [1] is the second entry in the list, not the first, which would be [0]. If you meant the first, you can use querySelector, which returns just the first match:

var _url = document.querySelector("." + id).getAttribute('href');

Onclick event not firing in IE8 and earlier

You can use pure jQuery code like below

$(document).ready(function() {
    $('#list a').click(function(e) {
        e.preventDefault();
        $(this).parent().toggleClass("expanded");
    });
});

As above code not working for you, pass this instead of event to your function. Updated code is as below:

HTML

<ul id="list">
    <li>
        <a href="url">Item 1</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
    <li>
        <a href="url">Item 2</a>
        <a href="javascript:void(0)" class="info-toggle" onclick="return toggleInfo(this)"></a>
        <p>Informational text</p>
    </li>
</ul>

JS

function toggleInfo(el) {
    $(el).parent().toggleClass("expanded");
    return false;
}

CSS

#list li p {
    display: none;
 }

#list li .info-toggle {
  background: blue url(../../images/info-blue17.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin: 0 0 -3px 10px;
  width: 17px;
}

#list li.expanded p {
  display: block;
}

#list li.expanded .info-toggle {
  background: #666 url(../../images/info-17.png) no-repeat;
}

Onclick event with if-else function not working IE8

Tested also in IE8: jsBin demo

function highlight() { 
  var el = this;
  var io = el.highlighted ^= 1; // Simple 1/0 Toggler
  el.style.backgroundColor = io ? "rgb(160, 216, 239)" : "transparent" ;
}


var $li = document.getElementsByTagName('li');
for(var i=0; i< $li.length; i++)
  $li[i].onclick = highlight;

This one works for me, so it's not an issue with rgb() ^{( rgba() is not supported! )}

but most likely in the way you assign your click event (i.e. addEventListener in not supported in IE8)

addEventListener not working in IE8

Try:

if (_checkbox.addEventListener) {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
else {
    _checkbox.attachEvent("onclick", setCheckedValues);
}

Update::
For Internet Explorer versions prior to IE9, attachEvent method should be used to register the specified listener to the EventTarget it is called on, for others addEventListener should be used.

Clickable label not working in IE 8

The reason it works the way it does in Firefox et al is that that's what <label> is supposed to do when it's got a "for" attribute that points to an input field (by "id" value). If it doesn't work that way in IE, it's because Microsoft either interpreted the standard differently or simply failed to implement it correctly. (I don't see any clear language in the w3c reference I found to stipulate whether anything but text content of a label should get focus and transfer it.)

Object doesn't support property or method 'attachEvent' in ie8 when attackhing an even

getElementsByTagName returns a collection of elements, not a single element. The collection doesn't have attachEvent. The individual elements do (on older IE).

---

Note also that:

• Your IE-specific branch doesn't wait for the full DOM to be parsed as your standards branch does. Either both should, or both should not, but not a mix. Best practice is not to use DOMContentLoaded and just put the script at the end of the HTML, immediately prior to the closing </body> tag.

• Your IE event handler isn't preventing the default action, whereas your standards one is.

If you want a cross-browser event attaching function, here's one in another answer on SO.

Hide/reveale js code won't run on IE8 or lower

uhh, a lot of things don't work on IE6 or 7. I suggest you drop support for them. Even Microsoft doesn't support it anymore! However, if you really need to go ahead with this, then use jQuery, which should fix your problems (when used correctly)

---

Related Topics