Home / Questions / 131695
Accepted
tripossi
Asked: 2020-01-18 07:15:40 +0800 CST 2020-01-18 07:15:40 +0800 CST

javascript events [closed]

  • 772

Good,

This is a row of my table, each of them has an onclick event. Clicking on the select calls that event which it shouldn't do. How can I do so that if it is clicked on the select, it opens the select and if it is clicked outside the select it triggers the event

Thank you

enter image description here

javascript

1 Answers

  1. Best Answer

    The click event is raised on the element that is clicked with the mouse and propagates up, raising to all elements above it in the DOM tree.

    To avoid this, catch the event in the element selectand use the method stopPropagationto stop the propagation of the event:

    $(function(){
  $('tr').click(() => console.log('click fila'));
  
  $('#mySelect').click((e) => e.stopPropagation());
});
    table tr td{
  padding: 10px;
  border: solid 1px #666666;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="fila">
    <td>&nbsp;</td>
    <td>
      <select id="mySelect">
        <option value="1">Opción 1</option>
        <option value="2">Opción 2</option>
        <option value="3">Opción 3</option>
        <option value="4">Opción 4</option>
        <option value="5">Opción 5</option>
      </select>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

    • 3