2

Hola tengo el siguiente codigo:

        <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <div class="box-header">
                        <h4 class="box-title"><label>Bootstrap Table</label></h4>
                    </div>
                    <table class="table" data-pagination="true" data-click-to-select="true" data-page-list="[5, 10, 15, 20]" data-search="true" class="table-hover" data-field="tableClinical" data-title="Titulo de la tabla" id="table" data-id="table" data-single-select="true">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true" id="check" data-align="center"></th>
                                <th data-field="id" data-sortable="true">Item ID</th>
                                <th data-field="name" data-sortable="true">Item Name</th>
                                <th data-field="price" data-sortable="true">Item Price</th>                                   
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

Estoy intentando mostrar un alert cuando se de click en cualquier elemento del body que no sea la tabla:

$("body").on("click", ":not(.table)", function (e) {
   alert("not table");
});

Sin resultados hasta el momento, alguien tiene alguna idea mejor.

2 respuestas 2

1

Debes utilizar event.stopPropagation para la tabla.

Así, en el caso de ser "table", el evento no continuará propagándose hacia el <body> y lo controlarás de manera independiente.

En esta página explican cómo se propagan los eventos desde la parte superior hacia la inferior.

$("body").on("click", function (e) {
   
   alert("not table");
   
});

$("table").on("click", function (e) {
   alert("Te he pillado, no hagas click en la tabla!!");
   e.stopPropagation();   

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <div class="box-header">
                        <h4 class="box-title"><label>Bootstrap Table</label></h4>
                    </div>
                    <table style="border: 1px solid black;" class="table" data-pagination="true" data-click-to-select="true" data-page-list="[5, 10, 15, 20]" data-search="true" class="table-hover" data-field="tableClinical" data-title="Titulo de la tabla" id="table" data-id="table" data-single-select="true">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true" id="check" data-align="center"></th>
                                <th data-field="id" data-sortable="true">Item ID</th>
                                <th data-field="name" data-sortable="true">Item Name</th>
                                <th data-field="price" data-sortable="true">Item Price</th>                                   
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

Aquí te he creado una pequeña demostración similar sobre cómo se propagan los eventos hacia "abajo".

$("div").click(function() {
  alert(this.id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a" style="background-color: blue; width: 300px; height: 300px" >
<p>A</p>
  <div id="b" style="background-color: yellow; width: 80%; height: 80%">
    <p>B</p>
    <div id="c" style="background-color: red; width: 80%; height: 80%">
    <p>C</p>
    </div>
  </div>
</div>

Por último, decirte que ese nivel de profundidad, corresponde con el valor CSS z-index que también puedes modificar y/o controlar para operar con él.

2
0

yo te propongo el siguiente camino ya que no me manejo mucho con JQuery:

  • Obtén en una variable a la etiqueta body a través de una clase que le asignes
  • Dale una clase a la etiqueta table
  • Dale un listener al evento click de la variable que igualamos con la clase que tiene asignada la etiqueta body
  • Evalúa si el elemento que disparó el evento contiene la clase que le dimos a la etiqueta body
  • En caso de contener dicha clase simplemente hacemos un console.log(1) para comprobar funcionalidad
  • En caso contrario podemos hacer un return para que no exista una funcionalidad asociada.

     <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        body {
          background-color: green;
          height: 100vh;
        }
      </style>
    </head>
    <body class="cuerpo">
    <table class="aquiSi">
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
      </tr>
      <tbody>
        <tr>
          <td>Contenido 1</td>
          <td>Contenido 2</td>
        </tr>
      </tbody>
    </table>
    <script>
      let cuerpoHTML = document.querySelector(".cuerpo")
      
      cuerpoHTML.addEventListener("click", (evento) => {
        if (evento.target.className === "cuerpo") {
          console.log(1)
        } 
      })
    </script>
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.