SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .event.srcElement in IE & FF making it work

    if(window.event){
    var current = window.event.srcElement;
    }else{
    var current = event.target;
    }

    and then i am using current in the code
    but i am not getting the value in either FF or IE

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by svibuk View Post
    if(window.event){
    var current = window.event.srcElement;
    }else{
    var current = event.target;
    }

    and then i am using current in the code
    but i am not getting the value in either FF or IE
    The standard way is for the function to accept the event as the first parameter. Internet Explorer doesn't use that first parameter, but most other web browsers do use the first parameter to pass the event.


    Code javascript:
    function clickHandler(evt) {
        ...
    }
    document.getElementById('...').onclick = clickHandler;

    The event can be passed as the evt variable, or with IE it will be from the window.event object, so we now bring those together:

    Code javascript:
    function clickHandler(evt) {
        evt = evt || window.event;
        ...
    }

    Most other web browser refer to the element that was clicked in the target property of the event. IE uses the property called srcElement instead. So we'll use a similar technique as was used before. If the target property exists we'll use that, and if it doesn't we'll use srcElement instead.

    Code javascript:
    function clickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        ...
    }

    The Opera web browser has an issue where clicking on test results in the text being the target, when it should be the element that contains the text instead, so we need to check if that's the case. The nodeType property will tell us what's going on there. If it's equal to node.TEXT_NODE we know there's a problem that needs to be fixed. It should be equal to node.ELEMENT_NODE instead.

    There's another problem though, because IE doesn't provide support for the node object, so we'll use the numeric representations of them instead (found at the Node.nodeType page.

    Code javascript:
    function clickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) { fix Opera text node issue
            targ = targ.parentNode;
        }
        ...
    }

    Now you can go on with the target element, perhaps by confirming that it is an element node (value of 1), and that it's an anchor element (string of 'A').
    Perhaps even by returning false to prevent the web browser from performing its default behaviour on that element.

    Code javascript:
    function clickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) { fix Opera text node issue
            targ = targ.parentNode;
        }
        if (targ.nodeType === 1 && targ.nodeName === 'A') {
            ...
        }
        return false;
    }

    That is the correct and proper way to get the target element and make good use of it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •