Geek Answers Handbook

Event Object in Firefox

Sorry, this seems like a great crowd fan ... That's why firefox did not change its code to fully match the Event object, just like Chrome. I did my homework, tried some of the solutions given here in StackOverflow, but nothing works. I have this code:

function xpto(e) { if( !e ) e = window.event; var x = e.target||e.srcElement; alert(x); ........ }

The call is made as follows:

 <svg id="graph-svg" onclick="xpto(event)" style="outline: none;" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Yes ... This is the svg element I'm trying to click. I did not put the complete code because it was not relevant to the question. Bottom line

 alert(x)

always warns with undefined in Firefox and runs on Chrome as a charm. I can capture the event in Firefox, but the "x" always cames undefined.

In firefox, either Event or SVG are supported in the DOM description. The event is even defined using the "target" and "srcElement" properties for backward compatibility.

I am using Firefox 20 on Ubuntu ... Can anyone help?

+4
source share
2 answers

After answering from d'alar'cop, I went into the code and found out that the argument that works in firefox is not “event” or “event”, but “evt” ... The console in Firebug showed this:

  function onclick(evt) { xpto(event) }

Thus, I realized that the handler is called with the "event", and not with the original argument "evt". Then, when it hit the handler, the "event" was "null" ... undefined.

+5
source

Many times I see an event handler built into the HTML code, instead I rely on more powerful event listeners .

Instead of using onclick why don't you attach a listener to an SVG element? You can try the following:

 var addListener = function (element, event, callback) { // We define a cross-browser function if (window.addEventListener) { // Mozilla/Webkit/Opera element.addEventListener(event, callback, false); } else { // IE element.attachEvent('on' + event, callback); } }; // Then we attach the event listener to the SVG element addListener(document.getElementById('graph-svg'), 'click', function (evt) { // Here you can manage the fired event alert(evt); });

or using jQuery:

 $('#graph-svg').on('click', function(evt){ alert(evt); });

You can try this with fiddle (tested with FF 20.0 and Chrome 26 on Ubuntu 12.10).

Of course, the built-in handlers are not always evil, but many times they are not a solution, IMHO.

+4
source

More articles:


All Articles