Binda olika händelser för att klicka och dubbelklicka - CSS-tricks

Anonim

Du kanske vill att en länk ska ha en speciell åtgärd när du dubbelklickar på vilket förhindrar länkens standardåtgärd (gå till en annan sida). Så:

Dubbelklicka: gör något speciellt, gör inte normalt klickhändelse alls
Klicka: fungerar som vanligt

Du måste ha en mycket liten fördröjning när du avfyrar den normala klickåtgärden, som du avbryter när dubbelklickhändelsen inträffar.

function doClickAction() ( $("#click h2").append("•"); ) function doDoubleClickAction() ( $("#double-click h2").append("•"); ) var timer = 0; var delay = 200; var prevent = false; $("#target") .on("click", function() ( timer = setTimeout(function() ( if (!prevent) ( doClickAction(); ) prevent = false; ), delay); )) .on("dblclick", function() ( clearTimeout(timer); prevent = true; doDoubleClickAction(); ));
Kolla in den här pennan!