outer event raise than inner event [ANSWERED]

outer event raise than inner event

Asked By: zanhtet
Originally Asked On: 2014-01-02 08:14:16
Asked Via: stackoverflow

I created the following html.

<table>
       <tr>
           <td onclick="window.location.href = 'Add.html'">
                1
                <div onclick="window.location.href = 'Update.html'">
                    Update me
                </div>
           </td>
       </tr>
</table>

When I click td, it redirect Add.html. It is OK. But when I click div, it also redirect to Add.html page. I would like to redirect to Update.html page. Thanks all.

He received 1 answers
eventually accepting:

Shadow’s answer to

outer event raise than inner event

DEMO

<table>
       <tr>
           <td onclick="loadUrl(event,'add.html')">
                Add me
                <div onclick="loadUrl(event,'update.html')">
                    Update me
                </div>
           </td>
       </tr>
</table>

JavaScript

function loadUrl(ev,url)
{
    var e = ev || window.event;
    alert(url);

    // do whatever you want


    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

If the selected answer did not help you out, the other answers might!

All Answers For: outer event raise than inner event

Shadow’s answer to

outer event raise than inner event

DEMO

<table>
       <tr>
           <td onclick="loadUrl(event,'add.html')">
                Add me
                <div onclick="loadUrl(event,'update.html')">
                    Update me
                </div>
           </td>
       </tr>
</table>

JavaScript

function loadUrl(ev,url)
{
    var e = ev || window.event;
    alert(url);

    // do whatever you want


    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Of course, you should really check out the original question.

The post outer event raise than inner event [ANSWERED] appeared first on Tech ABC to XYZ.