Ignore clickevent of underlying element

Question

This is my code

<tr class="rood hoverpointer" onclick="javscript:submenu('PR1301301065','KN_KABEL', event);">
    <td>PR1301301065</td>
    <td class="statusbalk">
        <img class="active" src="img/stop-big.png" alt="Niet gestart" onclick="javascript:setStatus('PR1301301065', 'KN_KABEL',1,this)">
        <img src="img/play-big.png" alt="Gestart" onclick="javascript:setStatus('PR1301301065', 'KN_KABEL',2,this)">
        <img src="img/pause-big.png" alt="Gestopt" onclick="javascript:setStatus('PR1301301065', 'KN_KABEL',3,this)">
        <img src="img/done-big.png" alt="Afgerond" onclick="javascript:setStatus('PR1301301065', 'KN_KABEL',4,this)">
    </td>
</tr>

It's all about the onclick-events. When I click on my table-row, the function submenu() is triggered. That's good. But when I click on one of my images, both setStatus() and submenu() are triggered because of the underlying tablerow. How can I ignore the function of my tablerow and only trigger setStatus()?

This is called event bubbling and can be taken care of - take a look here http://stackoverflow.com/questions/1997084/prevent-parent-container-click-event-from-firing-when-hyperlink-clicked — Mark Walters, Jun 14 '13 at 09:33
how about the event-value, do I have to change my onclick-value of the images and add "event" to it as a separate argument? — Jovano, Jun 14 '13 at 09:37

score 0 · Answer 1 · answered Jun 14 '13 at 09:48

When you call the submenu, you can try to do a switch to check which button was clicked. you Just need to call on the other buttons your submenu function passing their id´s

 <tr class="rood hoverpointer" id="trRood" onclick="javscript:submenu('PR1301301065','KN_KABEL', event,'trRood');">
            <td>PR1301301065</td>
            <td class="statusbalk">
                <img class="active" id="img1" src="img/stop-big.png" alt="Niet gestart" onclick="javascript:submenu('PR1301301065', 'KN_KABEL',1,this,'img1')">
                <img src="img/play-big.png" id="img2" alt="Gestart" onclick="javascript:submenu('PR1301301065', 'KN_KABEL',2,this,'img2')">
                <img src="img/pause-big.png" id="img3" alt="Gestopt" onclick="javascript:submenu('PR1301301065', 'KN_KABEL',3,this,'img3')">
                <img src="img/done-big.png" id="img4" alt="Afgerond" onclick="javascript:submenu('PR1301301065', 'KN_KABEL',4,this,'img4')">
            </td>
        </tr>


function submenu(...,...,id){

switch(id)

case "trRood":
//do your normally function
break;

case "img1":
//Call your setStatus function
break;

case "img2":
//Call your setStatus function
break;

case "img3":
//Call your setStatus function
break;

case "img4":
//Call your setStatus function
break;
}

it is something like this.

score 0 · Accepted Answer · answered Jun 14 '13 at 09:56

0

Yes you can change img tag in the HTML as..

    <img src="img/done-big.png" alt="Afgerond" onclick="javascript:setStatus(event,'PR1301301065', 'KN_KABEL',4,this)">

And in the javascript add event.stopPropogation() in the setStatus funcition.

answered Jun 14 '13 at 09:56

Yugandhar Pathi

914
9
15

Ignore clickevent of underlying element

2 Answers2