www.webdeveloper.com
Results 1 to 3 of 3

Thread: Listen to multiple browser events

  1. #1
    Join Date
    Oct 2009
    Posts
    12

    Listen to multiple browser events

    Hi All,
    I need to hide a table when clicked outside the table. The table is inside a div. Also there are some ul and li elements inside the table.
    I'm checking whether the target node is having the same id as of that of the div, if not then hide the div.
    But the problem is when the user clicks on the list items inside table, the target is different. I think getting navigating to the top of the DOM structure is not a good practice. Is there any method, by which we can listen to the events if it originate from the DIV.
    Please give your suggestions. Any help will be appreciated.
    Thanks
    Apps

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by AppsWorld View Post
    I think getting navigating to the top of the DOM structure is not a good practice.
    On the contrary, I think that is a good practice. Well, not exactly to the top of the DOM structure, but to a certain parent, An example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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">
    <style type="text/css">
    #container{
        background-color: #999999;
        height: 100px;
        width: 100px;
    }
    table{
    background:#99FFCC;
    border:none;
    width:50px;
    }
    </style>
    <script type="text/javascript">
    document.onclick=check;
    function check(e){
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('container');
    checkParent(target)?obj.style.display='none':null;
    }
    function checkParent(t){
    while(t.parentNode){
    if(t==document.getElementById('container')){
    return false
    }
    t=t.parentNode
    }
    return true
    }
    </script>
    </head>
    <body>
    <div id="container">
    <table cellpadding="2" cellspacing="1">
    <tr>
    <td>click</td>
    <td>ouside</td>
    </tr>
    <tr>
    <td>to hide</td>
    <td>the div</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Oct 2009
    Posts
    12

    Thank you

    Thank you very much for your kind reply Kor. This solved my problem Once again thanks a lot.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles