The click event is generated in the element that is clicked with the mouse and propagates upwards, generating all the superior elements in the DOM tree.
To avoid this, capture the event in the select
element and use the stopPropagation
method to 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> </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> </td>
<td> </td>
</tr>
</table>