Ik heb een knop als zodanig:
<input type="submit" id="submit" value="Save" />
Binnen jQuery gebruik ik het volgende, maar dubbelklikken is nog steeds mogelijk:
<script type="text/javascript">
$(document).ready(function () {
$("#submit").one('click', function (event) {
Enig idee hoe ik dubbelklikken kan voorkomen?
Antwoord 1, autoriteit 100%
jQuery’s one()zal de bijgevoegde gebeurtenishandler één keer activeren voor elk gebonden element en vervolgens de gebeurtenishandler verwijderen.
Als dat om de een of andere reden niet aan de vereisten voldoet, kan men de knop ook volledig uitschakelen nadat erop is geklikt.
$(document).ready(function () {
$("#submit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
Opgemerkt moet worden dat het gebruik van de ID submitproblemen kan veroorzaken, omdat het de functie form.submitoverschrijft met een verwijzing naar dat element.
Antwoord 2, autoriteit 37%
Nog één oplossing:
$('a').on('click', function(e){
var $link = $(e.target);
e.preventDefault();
if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 300) {
doSomething();
}
$link.data('lockedAt', +new Date());
});
Hier slaan we de tijd van de laatste klik op als data-attribuut en controleren dan of de vorige klik meer dan 0,3 seconden geleden was. Als het niet waar is (minder dan 0,3 sec geleden), update dan de laatste kliktijd, als het waar is, doe dan iets.
Antwoord 3, autoriteit 29%
Ik ontdekte dat de meeste oplossingen niet werkten met klikken op elementen zoals Labels of DIV’s (bijv. bij het gebruik van Kendo-besturingselementen). Dus maakte ik deze eenvoudige oplossing:
function isDoubleClicked(element) {
//if already clicked return TRUE to indicate this click is not allowed
if (element.data("isclicked")) return true;
//mark as clicked for 1 second
element.data("isclicked", true);
setTimeout(function () {
element.removeData("isclicked");
}, 1000);
//return FALSE to indicate this click was allowed
return false;
}
Gebruik het op de plaats waar je moet beslissen om een evenement te starten of niet:
$('#button').on("click", function () {
if (isDoubleClicked($(this))) return;
..continue...
});
Antwoord 4, autoriteit 14%
Mijn oplossing: https://gist.github.com/pangui/86b5e0610b53ddf28f94Het voorkomt dubbelklikken maar accepteert meer klikt na 1 seconde. Ik hoop dat het helpt.
Hier is de code:
jQuery.fn.preventDoubleClick = function() {
$(this).on('click', function(e){
var $el = $(this);
if($el.data('clicked')){
// Previously clicked, stop actions
e.preventDefault();
e.stopPropagation();
}else{
// Mark to ignore next click
$el.data('clicked', true);
// Unmark after 1 second
window.setTimeout(function(){
$el.removeData('clicked');
}, 1000)
}
});
return this;
};
Antwoord 5, autoriteit 13%
In mijn geval had jQuery one enkele bijwerkingen (in IE8) en uiteindelijk gebruikte ik het volgende:
$(document).ready(function(){
$("*").dblclick(function(e){
e.preventDefault();
});
});
wat heel mooi werkt en er eenvoudiger uitziet. Gevonden daar: http:/ /www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
Antwoord 6, autoriteit 7%
plaats deze methode gewoon in uw formulieren, dan zal het dubbelklikken of meer klikken in één keer verwerken. eenmaal verzoek om te verzenden, kan het niet opnieuw worden verzonden en opnieuw worden aangevraagd.
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
het zal je zeker helpen.
Antwoord 7, autoriteit 6%
“Easy Peasy”
$(function() {
$('.targetClass').dblclick(false);
});
Antwoord 8, autoriteit 2%
Ik heb hetzelfde probleem. U kunt setTimeout() gebruiken om dubbelklikken te voorkomen.
//some codes here above after the click then disable it
// controleer hier ook of er een kenmerk is uitgeschakeld
// als er een kenmerk is uitgeschakeld in de btn-tag, dan
// opbrengst. Zet dat om in js.
$('#btn1').prop("disabled", true);
setTimeout(function(){
$('#btn1').prop("disabled", false);
}, 300);
Antwoord 9, autoriteit 2%
Wat ik ontdekte was een oude maar werkende oplossing in moderne browsers. Werkt voor het niet wisselen van klassen bij dubbelklikken.
$('*').click(function(event) {
if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks
// Toggle classes and do functions here
$(this).slideToggle();
}
});
Antwoord 10
/*
Double click behaves as one single click
"It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable."
That way we have to check what is the event that is being executed at any sequence.
*/
var totalClicks = 1;
$('#elementId').on('click dblclick', function (e) {
if (e.type == "dblclick") {
console.log("e.type1: " + e.type);
return;
} else if (e.type == "click") {
if (totalClicks > 1) {
console.log("e.type2: " + e.type);
totalClicks = 1;
return;
} else {
console.log("e.type3: " + e.type);
++totalClicks;
}
//execute the code you want to execute
}
});
Antwoord 11
De oplossing van @Kichrum werkte bijna voor mij. Ik moest wel e.stopImmediatePropagation() toevoegen om de standaardactie te voorkomen. Hier is mijn code:
$('a, button').on('click', function (e) {
var $link = $(e.target);
if (!$link.data('lockedAt')) {
$link.data('lockedAt', +new Date());
} else if (+new Date() - $link.data('lockedAt') > 500) {
$link.data('lockedAt', +new Date());
} else {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
});
Antwoord 12
Dit is mijn eerste post ooit & Ik ben erg onervaren, dus doe het alsjeblieft rustig aan, maar ik heb het gevoel dat ik een geldige bijdrage heb die iemand kan helpen…
Soms heb je een heel groot tijdsinterval nodig tussen herhaalde klikken (bijvoorbeeld een mailto-link waarbij het een paar seconden duurt voordat de e-mailapp wordt geopend en je wilt niet dat deze opnieuw wordt geactiveerd), maar je wilt niet om de gebruiker ergens anders te vertragen. Mijn oplossing is om klassenamen te gebruiken voor de links, afhankelijk van het type gebeurtenis, terwijl ik de dubbelklikfunctionaliteit ergens anders behoud…
var controlspeed = 0;
$(document).on('click','a',function (event) {
eventtype = this.className;
controlspeed ++;
if (eventtype == "eg-class01") {
speedlimit = 3000;
} else if (eventtype == "eg-class02") {
speedlimit = 500;
} else {
speedlimit = 0;
}
setTimeout(function() {
controlspeed = 0;
},speedlimit);
if (controlspeed > 1) {
event.preventDefault();
return;
} else {
(usual onclick code goes here)
}
});
Antwoord 13
Je kunt zoiets als dit doen om de verzendknop uit te schakelen bij het laden van een nieuwe pagina met hetzelfde formulier:
$("#btnConfirm").bind("click", function (e) {
$("#btnConfirm ").css("pointer-events", "none");
});
De verzendknop kan er als volgt uitzien:
<input
type="submit"
name="ACMS_POST_Form_Confirm"
value="confirm"
id="btnConfirm"
/>
Antwoord 14
Ik had een soortgelijk probleem, maar het uitschakelen van de knop was niet voldoende. Er waren enkele andere acties die plaatsvonden toen op de knop werd geklikt en soms werd de knop niet snel genoeg uitgeschakeld en wanneer de gebruiker dubbelklikte, werden er twee gebeurtenissen geactiveerd.
Ik nam het time-outidee van Pangui en combineerde beide technieken, schakelde de knop uit en voegde een time-out toe, voor het geval dat. En ik heb een eenvoudige jQuery-plug-in gemaakt:
var SINGLECLICK_CLICKED = 'singleClickClicked';
$.fn.singleClick = function () {
var fncHandler;
var eventData;
var fncSingleClick = function (ev) {
var $this = $(this);
if (($this.data(SINGLECLICK_CLICKED)) || ($this.prop('disabled'))) {
ev.preventDefault();
ev.stopPropagation();
}
else {
$this.data(SINGLECLICK_CLICKED, true);
window.setTimeout(function () {
$this.removeData(SINGLECLICK_CLICKED);
}, 1500);
if ($.isFunction(fncHandler)) {
fncHandler.apply(this, arguments);
}
}
}
switch (arguments.length) {
case 0:
return this.click();
case 1:
fncHandler = arguments[0];
this.click(fncSingleClick);
break;
case 2:
eventData = arguments[0];
fncHandler = arguments[1];
this.click(eventData, fncSingleClick);
break;
}
return this;
}
En gebruik het dan als volgt:
$("#button1").singleClick(function () {
$(this).prop('disabled', true);
//...
$(this).prop('disabled', false);
})
Antwoord 15
Als je echt meerdere formulierinzendingen wilt vermijden, en niet alleen dubbelklikken, kan het gebruik van jQuery one() op de klikgebeurtenis van een knop problematisch zijn als er validatie aan de clientzijde is (zoals tekstvelden die als vereist zijn gemarkeerd) . Dat komt omdat klik validatie aan de clientzijde activeert en als de validatie mislukt, kunt u de knop niet opnieuw gebruiken. Om dit te voorkomen, kan one() nog steeds rechtstreeks worden gebruikt in de verzendgebeurtenis van het formulier. Dit is de schoonste op jQuery gebaseerde oplossing die ik daarvoor heb gevonden:
<script type="text/javascript">
$("#my-signup-form").one("submit", function() {
// Just disable the button.
// There will be only one form submission.
$("#my-signup-btn").prop("disabled", true);
});
</script>
Antwoord 16
Ik was in staat om deze taak efficiënt op de volgende manier te doen
-
Zodra de knop Click Handler wordt genoemd, wordt de knop
uitgeschakeld
-
Doe de nodige operaties te doen.
-
Stel het gehandicapte onroerend goed terug naar vals na een paar seconden met SetTimeout
$('#btn1).click(function(e){ $('#btn1').prop("disabled", true); setTimeout(()=>{ $('#btn1').prop("disabled", false); },2000)
Dit zou het probleem moeten oplossen.