separación de eventos de clic de javascript

Question

Quiero separar el evento de clic.

Todos los clics dentro de la etiqueta body tienen que ser alertados "fuera de la mesa",

Excepto el evento click dentro de la clase postit-table.

Este es mi código:

html

<table class="postit-table">
    <tbody>
    <tr class="postit-header">
        <td>header</td>
    </tr>
    <tr>
        <td><textarea class="postit-content"></textarea></td>
    </tr>
    </tbody>
</table>

css

.postit-table{
    width: 200px;
    height: 200px;
    background-color: yellow;
}

javascript (jquery):

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) {
    alert("clicked outside table!");
});

$(".postit-table").click(function(){
    alert("clicked inside table!");
});

jsfiddle:

http://jsfiddle.net/c5fomgp1/

Desafortunadamente, si ejecuta la aplicación Fiddle, todavía llama al evento de clic de la tabla externa :(

Alguien puede ayudar?

javascript jquery html css

1

Canna 3 sep. 2014 a las 11:37

Answer 1

Utilice stopPropagation() en el evento de clic postit-table: al hacerlo, el evento click no se propagará burbujeando hasta el elemento body

Ejemplo: http://jsfiddle.net/e5jph1Lt/

$("body").on('click', function() {
    alert("clicked outside table!");
});

$(".postit-table").on('click', function(evt) {
    evt.stopPropagation();
    alert("clicked inside table!");
});

Como nota al margen, use on() en lugar de bind() si usa una versión reciente de jQuery

3

Fabrizio Calderan 3 sep. 2014 a las 07:46

Answer 2

Uso

e.stopPropagation();

Código

http://jsfiddle.net/9e5128g1/

Impide que el evento forme burbujas en el árbol DOM, evitando que los controladores principales sean notificados del evento.

Árbitra.

http://api.jquery.com/event.stoppropagation/

1

Parfait 3 sep. 2014 a las 07:42

Answer 3

Resuelta

$("body").bind('click',':not(".postit-table,.postit-table tbody, .postit-table tr, .postit-table tbody tr td")', function (e) {
    alert("clicked outside table!");
});

$(".postit-table").click(function(e){
    e.stopPropagation();
    alert("clicked inside table!");
});

También intente para esto tiene otra solución. Trucos

3

Vivek Malik 3 sep. 2014 a las 08:18

Answer 4

Parece demasiado complicado para mí. Como ya respondieron otros, puede usar event.stopPropagation y simplificar su código. Algo como:

$(document).on('click', clickedoutside);
$('body').on('click', '.postit-table', clicked);

function clicked(e){
    e.stopPropagation();
    alert('clicked inside table!');
};

function clickedoutside(e){
    alert('clicked <b>outside</b> table!');
};

Aquí está su jsFiddle reescrito

0

KooiInc 3 sep. 2014 a las 08:40

separación de eventos de clic de javascript

4 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript