Estoy tratando de crear un sistema que requiera que un administrador haga clic en un botón de eliminación dos veces antes de que active la acción. si se enfoca fuera del botón, se reinicia.
$(".unarmed").css("filter", "grayscale(1)").removeClass("armed").click(function(e) { $(this).css("filter", "").removeClass("unarmed").addClass("armed"); }).mouseout(function() { $(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed"); }); $("body").on("click", ".armed", function() { alert("boom"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="unwait unarmed" src="plus.png"> ¿He visto que se dispara el detector de eventos jQuery antes de aplicar el selector? pero agregar e.stopPropagation() hace que el segundo clic no se active.
cuando e.stopPropagation() no está en el código, activa el segundo clic, pero junto con el primer clic (creo que esto significa que el problema no está en el segundo selector de clic)
aquí hay un violín con e.stopPropagation() : https://jsfiddle.net/3jyr72t6/
Además, si tienes alguna sugerencia para hacerlo más bonito, estoy abierto a sugerencias :D
Siempre puede usar el evento jquery dblclick . Jquery dblclick
$(document).on("dblclick",".btn-delete",function(){ console.log("DELETE"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn-delete">DELETE</button>@icecub responde como fragmento:
$(document).ready(function() { $(".unarmed").css("filter", "grayscale(1)"); $(".unarmed").click(function(e) { if ($(this).hasClass("armed")) { console.log("boom"); } $(this).css("filter", "").removeClass("unarmed").addClass("armed"); }).mouseout(function() { $(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="unwait unarmed" src="https://kns.im/include/img/plus.png" style="width:50px">Puede usar una función simple para detectar clics fuera del elemento. Vea el siguiente ejemplo
$("img.unwait").on("click" , function(e){ let $this = $(this); if($this.hasClass("unarmed")){ $this.removeClass("unarmed").addClass("armed"); }else if($this.hasClass("armed")){ alert("BOOM"); $this.removeClass("armed").addClass("unarmed"); } }); detect_click_out(".armed" , function(){ $(".armed").removeClass("armed").addClass("unarmed"); }); function detect_click_out(element_selector , action){ $(document).on('click',function(e){ if (!$(element_selector).is(e.target) // if the target of the click isn't the container... && $(element_selector).has(e.target).length === 0) // ... nor a descendant of the container {action();} // run the action as a function }); } img{ width : 50px; } .unarmed{ filter : grayscale(1); } .armed{ filter : grayscale(0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="unwait unarmed" src="https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg">