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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calling Function problem

    Dear All

    I am using Mozilla browser and I have a table cell calling a function with onClick(). <td onClick="function1()".....>

    Within the same cell i have placed an image which also having a onClick javascript function attached. <img onClick="function2()"..>

    If I click the other area except image within the cell, the cell attached javascript function1 is called.

    If I click on the image it is calling function attached to image first and function attached to cell also next.

    How I can avoid calling cell attached function1 when I am clicking the image.

    Please help me.

  • #2
    New Coder mentalhorse's Avatar
    Join Date
    Jul 2005
    Location
    Duanesburg, NY
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm... try
    event.cancelBubble = true;
    I'm not sure if that will work. Try posting your code.
    I don't exactly know where it will go yet.. yeah post your code.
    Why is a raven like a writing desk?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Img(zxce){
     if (zxcEventObj(zxce).tagName!='IMG'){ return; }
     alert('IMAGE');
    
    }
    
    function TD(zxce){
     if (zxcEventObj(zxce).tagName!='TD'){ return; }
     alert('TD');
    
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
     return zxceobj;
    }
    
    //-->
    </script></head>
    
    <body>
    <table border="1" >
     <tr>
      <td width=100 onclick="TD(event);" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" onclick="Img(event);" >
      </td>
     </tr>
    </table>
    </body>
    
    </html>

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    use a global which is to be modified according to the nature of your clicked target
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    param;
    function 
    fun1(){
    if(
    Boolean(param)){return}
    alert('this is a div');
    }
    function 
    fun2(){
    alert('this is an img');
    }
    document.onclick=function(e){
    var 
    target = (&& e.target) || (event && event.srcElement);
    param =(target.nodeName.toLowerCase()=='img')?0:1;
    }
    </script>
    </head>
    <body>
    <div style="background:#cccccc;width:300px" onclick="fun1()"><img src="00.jpg" onclick="fun2()"></div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    node/tag names are uppercase

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by vwphillips
    node/tag names are uppercase
    this is why I have used:

    param =(target.nodeName.toLowerCase()=='img')?0:1;

    You were not attentive
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    perhaps I was being too criptic for you so

    target.nodeName=='IMG'

    is best
    Last edited by vwphillips; 01-26-2006 at 02:10 PM.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    it is the same... I usually write everything in lowercase, so that, in my way of coding, i have used toLowerCase().

    target.nodeName=='IMG'
    is the same with
    target.nodeName.toLowerCase()=='img'

    It does not matter... Let it be your way, if that is to you...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    bad haddits can be hard to break

    You were not attentive

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    it is not a bad habbit, I don't know why is this quarell about. There is not a single way to code correctly. Both
    target.nodeName=='IMG'
    and
    target.nodeName.toLowerCase()=='img'
    are correct, so why so much trouble?... You may code your way, I will code mine. As long as it is a correct code, no problem at all.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    There are benefits to both approaches. The obvious problem with upper case string equality comparison is for XHTML documents that may be sent as XML or XHTML instead of HTML. The lower case transformation fixes this, but is slightly uglier. I'd have used /img/i.test(target.nodeName) instead myself, but any of those three approaches works just fine for plain HTML.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    oh, yes liorean, I forgot about this regexp comparision you have post a couple of days... And yes, as I have said there, I always think about XML and XHTML
    Last edited by Kor; 01-26-2006 at 03:36 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    liorean

    thank you for your considered and informative responce


  •  

    Posting Permissions

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