...

View Full Version : event registration in Opera??



anotherJEK
09-27-2012, 03:04 AM
I am having difficulty with all versions of Opera I have to test script with.

I thought that Opera was a DOM compliant browser. But I have event
registration code via either setAttribute, addEventListener, or attachEvent
the script in question works in both Firefox, and other DOM compliant browsers,
and in IE 7.

But Opera does not respond properly to mouse clicks that are suppose to
swap coordinates between absolutely positioned div, that are create and
appended in by code.
I have been watching the error consoles in Opera and no complaints, it
just goes DUH? Occasionally it will swap, but most of the time it won't.
Any suggestions?


//// preceding code...
var TIT = document.createElement('pre');
TIT.className = 'title';
TIT.appendChild(document.createTextNode(tit));
CNT.appendChild(TIT);
var HR = document.createElement('hr');
CNT.appendChild(HR)
var SUBDIV = '';
var samp = '';
var XOFST = 80; // larger sizes may need a different value
var YOFST = 40
var out = '';
for(var i = 0; i < idLst.length; i++)
{
var y = parseInt(idLst[idLstShuf[i]][2]) - YOFST;
var x = parseInt(idLst[idLstShuf[i]][3]) - XOFST;
SUBDIV = document.createElement('div');
SUBDIV.setAttribute('id', input.charAt(i)+i);
this.gameSet[i] = input.charAt(i)+i;
SUBDIV.style.position = 'absolute';
SUBDIV.style.top = y+'px';
SUBDIV.style.left = x+'px';
SUBDIV.style.height = '15px';
SUBDIV.style.width = '15px';
SUBDIV.style.padding = '10px';
SUBDIV.style.borderStyle = 'groove';
SUBDIV.style.borderWidth = '2px';
SUBDIV.style.background = '#6666ff';
SUBDIV.style.visibility = 'visible';
SUBDIV.style.zIndex = '2';
if(document.addEventListener)
{
SUBDIV.setAttribute('onclick', "_WW.swap(this.id, "+this.name+");");
}
var SPN = document.createElement('span');
SPN.className = 'letters';
SPN.setAttribute('id', 'sp'+input.charAt(i)+i)
SPN.appendChild(document.createTextNode(input.charAt(i)));
SUBDIV.appendChild(SPN);
CNT.appendChild(SUBDIV);
} // so now after content is appended:
if(document.attachEvent)
{
for(var i = 0; i < this.gameSet.length; i++)
{
var el = document.getElementById(this.gameSet[i]);
el.setCapture();
el.attachEvent('onclick', function(){ _WW.IEFindId() });
el.childNodes[0].attachEvent('onclick', function(){ _WW.IEFindId() })
}
}
//// etc...

//// specific swap code
//// preceding code....
var IE = false;
if(!e)
{
e = window.event.srcElement.id;
IE = true;
}
var BLNK = document.getElementById(this.blnkId);
var BLNKY = parseInt(BLNK.style.top);
var BLNKX = parseInt(BLNK.style.left);
var IT = document.getElementById(e);
var ITY = parseInt(IT.style.top);
var ITX = parseInt(IT.style.left);
var limit = 40;
var i = 0;
if((BLNKY - limit == ITY && BLNKX == ITX) || (BLNKX - limit == ITX && BLNKY == ITY) || (BLNKY + limit == ITY && BLNKX == ITX) || (BLNKX + limit == ITX && BLNKY == ITY))
{
if(IE == true)
{
IT.setAttribute('style', 'position:absolute;top'+BLNKY+'px;left:'+BLNKX+'px;height:15px;width:15px;padding:10px;border-style:groove;border-width:2px;background:#6666ff;visibility:visible;z-index:2')
BLNK.setAttribute('style', 'position:absolute;top'+ITY+'px;left:'+ITX+'px;height:15px;width:15px;padding:10px;border-style:groove;border-width:2px;background:#000033;visibility:visible;z-index:2')
}
else
{
IT.style.position = 'absolute';
IT.style.top = BLNKY+'px';
IT.style.left = BLNKX+'px';
IT.style.height = '15px';
IT.style.width = '15px';
IT.style.padding = '10px';
IT.style.borderStyle = 'groove';
IT.style.borderWidth = '2px';
IT.style.background = '#6666ff';
IT.style.visibility = 'visible';
IT.style.zIndex = '2';

BLNK.style.position = 'absolute';
BLNK.style.top = ITY+'px';
BLNK.style.left = ITX+'px';
BLNK.style.height = '15px';
BLNK.style.width = '15px';
BLNK.style.padding = '10px';
BLNK.style.borderStyle = 'groove';
BLNK.style.borderWidth = '2px';
BLNK.style.background = '#000033';
BLNK.style.visibility = 'visible';
BLNK.style.zIndex = '2';
//// etc.....

felgall
09-27-2012, 03:37 AM
Opera like other DOM compliant browsers supports addEventListener so if that isn't working then you have coded it wrong.

attachEvent is used by JScript (which is a similar language to Javascript that runs in IE8 and earlier)

you use setAttribute to atach attributes and event handlers/listeners are not attributes.

What you are doing wrong is that after testing if the browser supports addEventListener you then proceed to ignore that and try to use some other way to attach the event instead of attaching it correctly using addEventListener.

Instead of:


if(document.addEventListener)
{
SUBDIV.setAttribute('onclick', "_WW.swap(this.id, "+this.name+");");
}

You should be using:


if(document.addEventListener)
{
SUBDIV.addEventListener('click',function() {_WW.swap(this.id, "+this.name+");},false);
}


Your code doesn't work because it is not DOM compliant and is adding an invalid attribute called onclick instead of an event listener/handler.

If you wanted to add the event handler instead of the event listener you would use
SUBDIV.onclick = function() {_WW.swap(this.id, "+this.name+");

anotherJEK
09-30-2012, 05:05 AM
The idea of using set attribute was that the event handler was being added
before the element is appended to the page, so, perhaps I am wrong, an event
listener/handler could not be added at this point because the element has not
been appended at this point.

I coded it for IE to attachEvent after the element is appended.

So Opera does have some difference from other DOM browsers, because this
does work in all versions of FF, Safari, Chrome, and NN (yes I have a test
version of AOL NN on Windows) that I have to hand.

Logic Ali
09-30-2012, 06:42 PM
The idea of using set attribute was that the event handler was being added
before the element is appended to the page, so, perhaps I am wrong, an event
listener/handler could not be added at this point because the element has not
been appended at this point.
That is not an issue. As you were told, an event handler is not an attribute, therefore there is no obligation on setAttribute to install it; if there were, Opera would.
The rule is: Never use setAttribute unless direct assignment fails.

anotherJEK
09-30-2012, 10:21 PM
Here is what I came up to solve in Opera.


/// code
if(document.attachEvent)
{
for(var i = 0; i < this.gameSet.length; i++)
{
var el = document.getElementById(this.gameSet[i]);
// el.setCapture();// Opera complains, Win IE captures anywhere in the page
if(navigator.appName == 'Opera')
{
// Opera stumbles badly, will run as this.IEFindId() but throws errors for every event
el.attachEvent('onclick', function(){ this.IEFindId() });
el.childNodes[0].attachEvent('onclick', function(){ this.IEFindId() })
}
else // obj is an argument passed after instantiation of object
{
el.attachEvent('onclick', function(){ obj.IEFindId() });
el.childNodes[0].attachEvent('onclick', function(){ obj.IEFindId() })
}
}
}
// etc.....

Anyhow, this is working in Opera, now.
Another fine point I discovered is that when writing a multiline string to Opera, it will run "\n\r" as "\n\n" ( when, for instance, the string is to be
wrapped in <pre> tags). IE uses "\n\r". All other browsers I have tested in
will run "\n\r" as "\n"

felgall
10-01-2012, 10:43 PM
Why are you testing for attachEvent first rather than for addEventListener?

attachEvent is only needed for IE8 and earlier but by testing it first you force IE9 and IE10 to use that rather than the better alternative that they have available.

With new lines in JavaScript you shouldn't be using \r at all as that is not a part of what javaScript defines as the new line character which is just a single \n by itself. Internet explorer will add the \r that it requires without you needing to specify it and the other browsers don't need the \r at all and so you are just complicating the code by adding it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum