Two Clicks Javascript in one place, can one cancel the other?

Question

I have a little problem, and I would like, please, to have your help. In IMAGE 1: I have a click ($('. open-box'). click(Function (Openbox) {) on line 170, but within this line I have another click ($('. Arq-Folder'). click(Function (arqfolder) {) on line 173.

If I click on any area of the line of IMAGE 2 where I indicate with a red arrow the click of the class "open-box" runs, this is OK, the "little problem" is that when I click on the blue icon (Folder) to run the click of the class "Arq-Folder", the click of the class "open-box" also runs, but this could not happen! It seems impossible, because the class "Arq-Folder" is of a div that is inside the div with the class "open-box". My question is: If it is possible to click class "Arq-Folder", type cancel the click of class "open-box"? I’m just trying and trying... Aff.

Answer 1

You can call the method stopPropagation at the event.

Imagine that when you click on some element of your page, an event is created. This click event is generated in the element you clicked on, and then is raised to its parent element, and then raised to the parent element of the parent, and so on until you get to the root of your GIFT.

You added a eventListener in the elements arq-folder and open-Box, this means that there is a component listening to events in these elements, when a click event passes through these elements, the function you defined in these listeners is invoked.

If you don’t want the event captured on arq-folder be captured in the open-Box, just call the method stopPropagation in that event, and it will no longer be elevated to parent elements. As the event will not be elevated until the open-Box, the function of this element will not be activated. Example (click on the table row):

$('.open-Box').click(e => {
  console.clear()
  console.log('Ativou o evento do "open-Box"')

})

$('.arq-folder').click(e => {
  e.stopPropagation()
  console.clear()
  console.log('Ativou somente o evento do "arq-folder"')
})

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>S</th>
    <th>A</th>
    <th>Cliente</th>
    <th>Descrição do produto</th>
  </tr>
  <tr class="open-Box">
    <td></td>
    <td class="arq-folder"></td>
    <td>João Batista de Carvalho Azevedo</td>
    <td></td>
  </tr>
</table>