Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    211
    Thanks
    52
    Thanked 1 Time in 1 Post

    window.event.srcElement.id unreliable?

    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?

  • #2
    New Coder
    Join Date
    Jan 2011
    Posts
    52
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by anotherJEK View Post
    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.

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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' ) {
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.]
    Last edited by AndrewGSW; 09-13-2012 at 12:18 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by anotherJEK View Post
    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>

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    52
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by DaveyErwin View Post
    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+" "))   
    }

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    211
    Thanks
    52
    Thanked 1 Time in 1 Post

    Here is what I had and what I did

    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

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    IE 9 has both
    addEventListener and attachEvent
    so your code should be like

    if(!!window.attachEvent && !window.addEventListener){
    Last edited by DaveyErwin; 09-13-2012 at 01:46 PM.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    211
    Thanks
    52
    Thanked 1 Time in 1 Post

    I guess this is why I'm listed as a 'new coder'

    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?

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by anotherJEK View Post
    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
    Last edited by DaveyErwin; 09-19-2012 at 12:42 AM.


  •  

    Posting Permissions

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