window.event.srcElement.id unreliable?

anotherJEK · 09-12-2012, 11:22 PM

I am using window.event.srcElement to reference an element for processing
and it has shown to be extremely unreliable for this.
The situation is that there is a square grid of divs generated dynamically
by user action, that contain either of 9, 16, or 25 tiles. Since the number
of tiles the user will select cannot be known before hand, the tiles in the
grid are created and inserted and assigned id attribute by code.
In IE I am using attachEvent to assign click event listeners that calls code that
needs to see window.event.srcElement.id.

Are there any ideas about why this would be so unreliable?

Calvert Tripesi · 09-13-2012, 12:00 AM

Quote:

Originally Posted by anotherJEK

In IE I am using attachEvent to assign click event listeners that calls code that
needs to see window.event.srcElement.id.

Are there any ideas about why this would be so unreliable?

You need to be certain that srcElement isn't a child of the clicked tile, for instance a text node or whatever content it may have.

AndrewGSW · 09-13-2012, 12:08 AM

Some browsers use target rather than srcElement, so you need to equalise across browsers:

Code:

function (e) {
    var evt = e || window.event;
    var elem = evt.target || evt.srcElement;
    if ( elem.nodeName.toLowerCase() == 'div' ) {

AndrewGSW · 09-13-2012, 12:13 AM

You could also use the following addEvent function in place of attachEvent and addEventListener:

Code:

function addEvent (elem, eventType, func) {
    if ( elem.addEventListener )
        addEvent = function (elem, eventType, func) {
            elem.addEventListener(eventType, func, false);
        };
    else if ( elem.attachEvent )
        addEvent = function (elem, eventType, func) {
            elem.attachEvent('on' + eventType, func);
        };
    else
        addEvent = function (elem, eventType, func) {
            elem['on' + eventType] = func;
        };
    addEvent(elem, eventType, func);
}

[This is not my original code -Scott Andrew , I believe.]

DaveyErwin · 09-13-2012, 12:13 AM

Quote:

Originally Posted by anotherJEK

In IE I am using attachEvent to assign click event listeners that calls code that needs to see window.event.srcElement.id.

Are there any ideas about why this would be so unreliable?

can you provde code that
illistates the problem ?
What do you mean by unreliable ?
this code seems very reliable ...

Code:

<!DOCTYPE html> 
<body>
<script type="text/javascript">
d=document
for(i=0;i<25;i++){
	div=d.createElement("DIV")
	div.id="div"+i
	div.appendChild(d.createTextNode("hiyas"))
	if(i%5)div.setAttribute('style', 'float: left');
	else div.setAttribute('style', 'clear: both;float:left');
	div.attachEvent("onmouseover",action)
	d.body.appendChild(div)
}

function action()
{
  d.body.appendChild(d.createTextNode(event.srcElement.id+" "))   
}
</script>
</body>
</html>

Calvert Tripesi · 09-13-2012, 01:18 AM

Quote:

Originally Posted by DaveyErwin

this code seems very reliable ..

Change the event to click as used by the OP, add a child element and then of course it's not reliable:

Code:

<!DOCTYPE html> 
<body>
<script type="text/javascript">
d=document
for(i=0;i<25;i++){
 div=d.createElement("DIV")
 
 innerDiv = d.createElement("DIV");
 innerDiv.setAttribute('style', 'border:1px solid #000;width:20px;height:20px');
 div.appendChild( innerDiv );
 div.id="div"+i
 div.appendChild(d.createTextNode("hiyas"))
 if(i%5)div.setAttribute('style', 'border:solid 1px red; float: left');
 else div.setAttribute('style', 'border:solid 1px red; clear: both;float:left');
 div.attachEvent("onclick",action)
 d.body.appendChild(div)
}

function action()
{
  d.body.appendChild(d.createTextNode(event.srcElement.id+" "))   
}
</script>
</body>
</html>

But it's easily fixed by changing the action function to this:

Code:

function action( )
{
  var srcElem = event.srcElement;
  
  while( srcElem && srcElem.id == "" )
    srcElem = srcElem.parentNode;
 
  d.body.appendChild(d.createTextNode( srcElem.id+" "))   
}

anotherJEK · 09-13-2012, 01:35 AM

What I did to solve the problem
Critical code at lines with '////<<<<'

Code:

// previous code....
         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);
              out += SUBDIV.id+"/n";
              idSet[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', "swap(this.id, '"+input+"')");////<<<< Mozilla DOM syntax
                }
              var SPN = document.createElement('span');
                  
                  SPN.style.fontFamily = 'sans-serif';
                  SPN.style.fontSize = "14pt"; // !important;  has no effect on text size change by user 
                  SPN.style.margin = 'auto auto auto auto';
                  SPN.style.color ='#000033';

                  SPN.appendChild(document.createTextNode(input.charAt(i)));
                  SUBDIV.appendChild(SPN);
                  CNT.appendChild(SUBDIV);
             }
          if(document.attachEvent)
            {
             for(var i = 0; i < idSet.length; i++)
                {
                 var el = document.getElementById(idSet[i]);
                     el.attachEvent('onclick', function(){ IEFindId() });////<<<<
                }
             }
          var CNT = document.getElementById('TP');
          var idSet = new Array()
              idSet[0] = 0;
              idSet[1] = idLst.length;
          blnk = getRand(idSet, '1');
          blnkId = idLst[blnk][0]+blnk;
          var BLNK = document.getElementById(blnkId);
          var BLNKX = BLNK.style.left;
          var BLNKY = BLNK.style.top;
              blnkIdTop = BLNKY;
              blnkIdLeft = BLNKX;
              
              BLNK.style.position = 'absolute';
              BLNK.style.top = BLNKY;
              BLNK.style.left = BLNKX;
              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.zIndex = '2';
              if(document.detatchEvent)
                {
                 var e = '';
                 var emp = document.getElementById(blnkId);
                     emp.detachEvent('onclick', function(){ IEFindId() }); ////<<<<
                }
              //// BLNK.removeAttribute('onmouseover');
              //// BLNK.removeAttribute('onmouseout');
              else
                {
                 BLNK.removeAttribute('onclick');
                }
         // etc.....
// code of registered function call
function IEFindId()
          {
           for(var i = 0; i < idLst.length; i++)
              {
               if(window.event.srcElement.id == idLst[i][4])
                 {
                  swap(idLst[i][4], solution);
                 }
              }
          }

what I had

Code:

// preceding code....
         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);
              out += SUBDIV.id+"/n";
              idSet[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', "swap(this.id, '"+input+"')");////<<<< Mozilla DOM syntax
                }
              var SPN = document.createElement('span');
                  
                  SPN.style.fontFamily = 'sans-serif';
                  SPN.style.fontSize = "14pt"; // !important;  has no effect on text size change by user 
                  SPN.style.margin = 'auto auto auto auto';
                  SPN.style.color ='#000033';

                  SPN.appendChild(document.createTextNode(input.charAt(i)));
                  SUBDIV.appendChild(SPN);
                  CNT.appendChild(SUBDIV);
             }
          if(document.attachEvent)
            {
             for(var i = 0; i < idSet.length; i++)
                {
                 var e = '';
                 var el = document.getElementById(idSet[i]);
                     el.attachEvent('onclick', function(){ swap(e, solution) }); ////<<<<
                }
             }
          var CNT = document.getElementById('TP');
          var idSet = new Array()
              idSet[0] = 0;
              idSet[1] = idLst.length;
          blnk = getRand(idSet, '1');
          blnkId = idLst[blnk][0]+blnk;
          var BLNK = document.getElementById(blnkId);
          var BLNKX = BLNK.style.left;
          var BLNKY = BLNK.style.top;
              blnkIdTop = BLNKY;
              blnkIdLeft = BLNKX;
              
              BLNK.style.position = 'absolute';
              BLNK.style.top = BLNKY;
              BLNK.style.left = BLNKX;
              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.zIndex = '2';
              if(document.detatchEvent)
                {
                 var e = '';
                 var emp = document.getElementById(blnkId);
                     emp.detachEvent('onclick', function(){ IEFindId() });
                }
              //// BLNK.removeAttribute('onmouseover');
              //// BLNK.removeAttribute('onmouseout');
              else
                {
                 BLNK.removeAttribute('onclick');
                }
         // etc.....

Code in swap()

Code:

function swap(e, input)
         {
          /*
           created 10/5/09 
          */
          //// alert(a)
         if(!e)
           {
            e = window.event.srcElement.id;
           }
          var BLNK = document.getElementById(blnkId);
          var BLNKY = parseInt(BLNK.style.top);
          var BLNKX = parseInt(BLNK.style.left);
              blnkIdTop = BLNKY;
              blnkIdLeft = BLNKX;
          var IT = document.getElementById(e) ////<<<<- Here is the problem when it occurs, object is null or empty
  //// etc.....

So, I thank you all for your time and attention. The revised code, here,
appears to allow IE to recover enough to get the element id.
e.target is used in DOM complient browsers based on Mozilla.
My apologies if it seems to be abusive to post a question and then solve it myself before reading responses.
My hope is this will help others who encounter comparable problem.
JK

DaveyErwin · 09-13-2012, 02:31 AM

IE 9 has both
addEventListener and attachEvent
so your code should be like

if(!!window.attachEvent && !window.addEventListener){

anotherJEK · 09-18-2012, 11:26 PM

I have not seen the syntax !! in any language:
if( !! window.attachEvent && !window.addEventListener){
What exactly does the double not (!!) mean?
Is this specific to IE 9?

DaveyErwin · 09-19-2012, 12:09 AM

Quote:

Originally Posted by anotherJEK

I have not seen the syntax !! in any language:
if( !! window.attachEvent && !window.addEventListener){
What exactly does the double not (!!) mean?
Is this specific to IE 9?

! means negate
!! means don't negate
either one returns a boolean
!! returns true for a truethy expression or false for a falsish one
! returns false for a truethy expression or true for a falsish one

I believe your code will
give ie9 two events
which will each fire

if( !! window.attachEvent && !window.addEventListener)addEventCodeHear

the above will execute addEventCodeHear
in ie8 or ie9 in Quirks mode but not ie9 in standard mode or FF

most often I see code like this

if(addEventListener)......
else ......... //assume attachEvent

but your code seems to test
for addEventListener then
test for attachEvent
ie9 in standards mode will pass both tests