Question

I have a table with a tr style like this:

echo "<tr style=\"background-color: $farbe;\" onmouseover=\"this.style.cursor='pointer';this.style.backgroundColor='#87CEFF';\"onclick=\"window.location='overview.php?adrnr=" . $inhalt["AdrNr"] . "'\"  onMouseOut=\"this.style.backgroundColor='$farbe';\">\n";

and I would like to have a button in one of the elements that would look something like this

<td> <input type = "button" value = "Bearbeiten" onClick="self.location.href='  changeadress.php'" >

the problem is as soon as I press the button I get to overview.php since the td got that is there any way around this.

Answer 1

You can use event.stopPropogation() or window.event.cancelBubble in IE.

You can combine them in a single function like this:

<script type='text/javascript'>
    function stopEventBubble(event)
    {
       if (event.stopPropagation){
           event.stopPropagation();
       }
       else if(window.event){
          window.event.cancelBubble=true;
       }
    }
</script>

<table>
    <tr onclick="window.location='http://www.google.com'">
        <td>
            <button onclick="self.location.href='http://www.yahoo.com'; stopEventBubble(event)">stuff</button>
        </td>
    </tr>
</table>

Mostly taken from this SO: How to stop event propagation with inline onclick attribute? which has some good comments on this