Como cancelar evento pai em HTML?

Bom dia!

Estou desenvolvendo um site em PHP e tenho uma página de cadastro onde dentro da mesma é incluída uma outra página para listar os contatos daquele cadastro.
Esta página consiste em uma table onde ao dar clique sobre a linha é chamado a tela para edição do contato. Porém, na mesma linha há uma imagem com um “X” onde ao dar clique deveria chamar a ação de exclusão do contato.
O problema é que, como ambos deveriam ser chamados no clique, a ação da imagem é cancelada já que o OnClick do pai (

nesse caso) prevalece. Sendo assim, ao clicar sobre o “X”, é chamado a tela de edição de contatos.
Já tentei utilizar os comandos cancelBubble e stopPropagation e até funcionou em certo momento mas, devido a alguma alteração posterior parou.

Gostaria de saber se alguém sabe como eu poderia fazer para que o clique na imagem não interfira no clique da linha, ou seja, ao clicar na imagem seja executado uma ação e na linha outra.

Segue abaixo uma imagem da página e em seguida o código da parte de listagem de contatos.

Obrigado.

<a class="Botao" id="BotaoNovoContato">Novo</a>
<table width="100%" cellspacing="0" class="Tabela">
  <tr>
    <th>
      Nome
    </th>
    <th>
      Cargo
    </th>
    <th>
      e-Mail
    </th>
    <th style="width:50px" >
      <img src="../recursos/imagens/icones/email.png" width="24" 
        height="24" alt="Permite enviar e-mail para o contato?" title="Permite enviar e-mail para o contato?" /> 
    </th>
    <th>
      Fone
    </th>
    <th>
      Celular
    </th>
    <?php
      if($_SESSION['Usuario']->Admin)
      {
    ?>
    <th width="20px">
      Exc.
    </th>
    <?php
      }
    ?>
  </tr>
  <?php
    if(isset($ResultSet))
    {
      while($Contato = $ResultSet->ObterProximo())
      {
  ?>
  <tr OnClick="
    window.open('EdicaoContato.php?Editar=<?php echo $Contato->Id ?>',
    'edicaocontato',
    'width=600,height=450,scrollbar=no,toolbar=no');">
    <td>
      <?php echo $Contato->NomeContato ?>
    </td>
    <td width="200">
      <?php echo $Contato->CargoContato ?>
    </td>
    <td  width="300">
      <?php echo $Contato->EmailContato ?>
    </td>
    <td align="center">
      <?php echo $Contato->PermiteEnvioEmail ?>
    </td>
    <td width="100">
      <?php echo $Contato->FoneContato ?>
    </td>
    <td width="100">
      <?php echo $Contato->CelularContato ?>
    </td>
    <?php
      if($_SESSION['Usuario']->Admin)
      {
    ?>
    <td  width="20px" align="center">
      <input type="hidden" name="CONTATOPROSPECTSGPID" id="CONTATOPROSPECTSGPID" value="<?php echo($Contato->Id); ?>"/>
      <img id="ImgExcluir" onclick="ExcluirContato()" src="../recursos/imagens/icones/excluir.gif" alt="Excluir" title="Excluir" />
    </td>
    <?php
      }
    ?>
  </tr>
  <?php
      }
    }
  ?>
</table>
<script type="text/javascript">
  function NovoContato()
  {
    if('<?php echo($_GET['PROSPECTSGPID']); ?>' == '')
      alert('E necessario salvar o prospect antes de inserir contatos.');
    else
      window.open('EdicaoContato.php?Inserir=<?php echo($_GET['PROSPECTSGPID']); ?>',
        'edicaocontato', 'width=600,height=450,scrollbar=no,toolbar=no');
  }
  
  function ExcluirContato()
  {
    if(window.event)
      window.event.cancelBubble = true;
    else if(Evento && Evento.stopPropagation)
      Evento.stopPropagation();
    
    function VerificaResultado(Resultado)
    {
      Resultado = eval(Resultado);
      if(Resultado) //se o resultado não estiver vazio
        alert(Resultado);
      else
      {
        alert('Dados excluidos.');
        CarregarContatos();
      }
    }
    
    if(confirm('Deseja mesmo excluir este contato?'))
    {
      var Dados = 'CONTATOPROSPECTSGPID=' + encodeURIComponent(document.getElementById('CONTATOPROSPECTSGPID').value);
      Ajax('/Sockets/ExcluiContato.php', 'POST', Dados, VerificaResultado);
    }
  };
 
  var BotaoNovoContato = document.getElementById('BotaoNovoContato');
  BotaoNovoContato.addEventListener('click', NovoContato, false);
</script>

Topicos relacionados