How can I make event.srcElement work in Firefox and what does it mean?

Question

there is an if statement on my company's website that makes one web page imcompatible with firefox

if(event.srcElement.getAttribute("onclick") == null){ 
...code..
document.mainForm.submit();
}

I've commented out the if statement conditions and now its working with forefox. My question is, what is event.srcElement.getAttribute("onclick"), is it important, would it cause problems in the future. also, is there something similar i can replace the condition with so that it works on firefox?

Edit:

 function gotoRDManagerPT(PTId, bDDetailId) {
        if(!proceed()) return false;
        var target = event.target || event.srcElement; 
        if(event.target.getAttribute("onclick") == null) { 
            document.mainForm.displayRDManagerPT.value = "true";
            document.mainForm.PTId.value = PTId;
            document.mainForm.bDDetailId.value = bDDetailId;
            document.mainForm.submit();
        }
    }

Solution 1

srcElement is proprietary property originally coming from IE. The standardized property is target:

var target = event.target || event.srcElement;

if(target.onclick == null) { // shorter than getAttribute('onclick')
    //...
    document.mainForm.submit();
}

Also have a look at quirksmode.org - Event properties for more cross browser information.

---

Regarding the question what it is doing:

event.target / event.srcElement contains a reference to the element the event was raised on. getAttribute('onclick') == null checks whether a click event handler is assigned to element via inline event handling.

Is it important? We cannot say because we don't know what the ...code.. is doing.

Solution 2

In IE the event object is available in the window object already; in Firefox, it's passed as a parameter in the event handler.

Example

JavaScript:

function toDoOnKeyDown(evt)

{

    //if window.event is equivalent as if thie browser is IE then the event object is in window
    //object and if the browser is FireFox then use the Argument evt

    var myEvent = ((window.event)?(event):(evt));
    //get the Element which this event is all about 

    var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
    //To Do -->

}

HTML:

<input type="text" id="txt_Name" onkeydown="toDoOnKeyDown(event);"/>

As you notice when we called the function inside the html we have added a parameter event just in case the browser is Firefox.

I have read in an article that the event object in IE is called window.event and in Firefox we have to put it as a parameter.

In case you need it to be attached in the code:

document.getElementById('txt_Name').onkeydown = function(evt) {
    var myEvent = ((window.event)?(window.event):(evt));


    // get the Element which this event is all about 

    var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
    // To Do -->
};

Comments

[Lightness Races in Orbit]

A quick Google search for "event.srcElement" yielded this explanation and solution.

[124697]

Thanks for that felix, however i still get a javascript error "event is undefined [Break On This Error] var target = window.event.target || event.srcElement; " any idea why?

[Felix Kling]

@user521180: In all other browsers, the event is not available via the window but passed as first argument to the event handler. So you need something like function yourHandler(event) { event = event || window.event; var target = event.target || event.srcElement; ...}. Or post the code where this is contained in if you need more help.

[124697]

I've eddited my original post to include the whole function

[Felix Kling]

@user521180: How is this function called? You definitely have to add a third parameter that takes the event object.

[124697]

what would i pass to it as the event? like this? gotoRDManagerPT(PTId, bDDetailId, event) and call it gotoRDManagerPT(1,1, event)?

[Felix Kling]

@user521180: Yes, for example like that, but it depends on where and how the function gotoRDManagerPT is called. Is it also an inline event handler?

[Marwan]

Thanks for the Edit iam just new here :) thanxs again

[Vincent]

What if you're already passing another value into this function? Do you just add "evt" as the second parameter? How does Javascript then know which parameter is the event object? Does it have to be the first parameter? or the last?

[Alex Char]

@FelixKling I think now isn't supported only from FF Event.srcElement

[SlimPDX]

This should be updated. You're right, @FelixKling. Event.srcElement is now only unsupported in firefox. developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

[Felix Kling]

@MaxMarchuk: Doesn't make much of a difference IMO. It's still a non-standard property. Updated nonetheless.