event bubling problem

Question

serkan sendur 821 Postaholic

15 Years Ago

hi guys, i have one main page with two iframe elements, these two iframe elements is assigned same source file as follows :

mainpage.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <iframe id="leftPane" src="iframepage.htm" width="300" height="800"></iframe>
            </td>
            <td>
                <iframe id="rightPane" src="iframepage.htm" width="300" height="800"></iframe>
            </td>
        </tr>
    </table>
    <script>
     window.frames.leftPane.document.onclick = function()
   {
        window.frames.rightPane.document.getElementById(window.frames.leftPane.window.event.srcElement.id).click();
   }
    </script>
</body>
</html>

iframepage.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function ExpandCollapseTable(titleRow)
    {
//        if(titleRow.parentNode.childNodes.length > 1)
//        {
//             if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
//             {
//                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
//                {
//                    titleRow.parentNode.childNodes[i].style.display = "none";
//                }
//             }
//             else
//             {
//                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
//                {
//                    titleRow.parentNode.childNodes[i].style.display = "block";
//                }
//             }
//        }
        alert(titleRow);
    }
    </script>
</head>
<body>
    <table border=1>
        <tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;" id="someID">
        <td colspan=3>
        Table Header(click to expand-collapse)
        </td>
        </tr>
        <tr>
            <td style="width: 100px">
                1</td>
            <td style="width: 100px">
                2</td>
            <td style="width: 100px">
                3</td>
        </tr>
        <tr>
            <td style="width: 100px">
                4</td>
            <td style="width: 100px">
                5</td>
            <td style="width: 100px">
                6</td>
        </tr>
        <tr>
            <td style="width: 100px">
                7</td>
            <td style="width: 100px">
                8</td>
            <td style="width: 100px">
                9</td>
        </tr>
    </table>
<div id="something" onclick="ExpandCollapseTable('alert something');">deneme</div>
</body>
</html>

if you run this application you will see that there is a problem when you click on left hand side table's first row. if you click on the div element, however, there is no problem.
Do you have any idea?

javascript

2 Contributors
2 Replies
89 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Rashakil Fol

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

serkan sendur 821 Postaholic Banned · Answer 1 · 2009-03-07T03:54:19+00:00

i found it guys : the problem is when you try to click on a row, you first try on a cell, then that click event bubbles up to row and to the document, but since in the previous example the td element does not have any id assigned to it, the window.event.srcElement.id is empty, that is why browser gave an error. it tried to call the element having the same id on the right hand side pane, which is impossible because there is no id. i just cut and paste the onclick event from row to cell and it solved the problem.

here if i summarize what i want to say above : dont forget that you are first clicking a table cell before you click a row, it is almost impossible to directly click on a row since td elements are nested inside, as a good habit try to use cell events instead of rows.

here is the modified iframepage.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">
    function ExpandCollapseTable(titleRow)
    {
        if(titleRow.parentNode.childNodes.length > 1)
        {
             if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "none";
                }
             }
             else
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "block";
                }
             }
        }
    }
    </script>

</head>
<body>
    <table border="1">
        <tr>
            <td colspan="3" onclick="ExpandCollapseTable(this.parentNode);" style="cursor: pointer;" id="someID">
                Table Header(click to expand-collapse)
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
                1</td>
            <td style="width: 100px">
                2</td>
            <td style="width: 100px">
                3</td>
        </tr>
        <tr>
            <td style="width: 100px">
                4</td>
            <td style="width: 100px">
                5</td>
            <td style="width: 100px">
                6</td>
        </tr>
        <tr>
            <td style="width: 100px">
                7</td>
            <td style="width: 100px">
                8</td>
            <td style="width: 100px">
                9</td>
        </tr>
    </table>
    <div id="something" onclick="ExpandCollapseTable('alert something');">
        deneme</div>
</body>
</html>

if you want to see this working example run the application from the mainpage.htm, do not directly run iframepage.htm

Rashakil Fol 978 Super Senior Demiposter Team Colleague · Answer 2 · 2009-03-11T09:09:03+00:00

Rashakil Fol 978 Super Senior Demiposter

15 Years Ago

Goddamnit just use jQuery.