Outer event raise than inner event

Question

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.

possible duplicate of http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — Enermis, Jan 02 '14 at 08:24

Voonic · Accepted Answer · 2014-01-02T08:42:56.733

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();
}

Outer event raise than inner event

1 Answers1