У меня есть кнопка как таковая:
<input type="submit" id="submit" value="Save" />
В jQuery я использую следующее, но он по-прежнему позволяет делать двойные щелчки:
<script type="text/javascript">
$(document).ready(function () {
$("#submit").one('click', function (event) {
Любая идея о том, как я могу предотвратить двойной щелчок?
jQuery one() будет запускать подключенный обработчик событий один раз для каждого связанного элемента и затем удалить обработчик события.
Если по какой-то причине это не соответствует требованиям, можно было бы полностью отключить кнопку после ее нажатия.
$(document).ready(function () {
$("#submit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
Следует отметить, что использование идентификатора submit может вызвать проблемы, поскольку оно перезаписывает функцию form.submit ссылкой на этот элемент.
Еще одно решение:
$('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());
});
Здесь мы сохраняем время последнего клика как атрибут данных, а затем проверяем, был ли предыдущий клик более 0,3 секунды назад. Если оно ложно (менее 0,3 секунды назад), просто обновите последнее время клика, если оно истинно, сделайте что-нибудь.
Мое решение: https://gist.github.com/pangui/86b5e0610b53ddf28f94 Это предотвращает двойной щелчок, но принимает больше кликов через 1 секунду. Надеюсь, что это поможет.
Вот код:
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;
};
В моем случае у jQuery one были некоторые побочные эффекты (в IE8), и я закончил использовать следующее:
$(document).ready(function(){
$("*").dblclick(function(e){
e.preventDefault();
});
});
который работает очень красиво и выглядит проще. Найдено там: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
Я обнаружил, что большинство решений не работают с кликами по элементам, таким как ярлыки или DIV (например, при использовании элементов управления Kendo). Поэтому я сделал это простое решение:
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;
}
Используйте его в том месте, где вам нужно принять решение о начале события или нет:
$('#button').on("click", function () {
if (isDoubleClicked($(this))) return;
..continue...
});
У меня подобная проблема. Вы можете использовать setTimeout(), чтобы избежать двойного щелчка.
//some codes here above after the click then disable it
//также проверьте здесь, если отключен атрибут
//если в теге btn отключен атрибут, тогда // вернуть. Преобразуйте это в js.
$('#btn1').prop("disabled", true);
setTimeout(function(){
$('#btn1').prop("disabled", false);
}, 300);
просто поместите этот метод в свои формы, тогда он будет обрабатывать двойной щелчок или больше кликов за один раз. после того, как запрос будет отправлен, он не позволит отправлять снова и снова запрос.
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
это поможет вам наверняка.
У меня была аналогичная проблема, но отключение кнопки не полностью выполнило трюк. Были и другие действия, которые были сделаны при нажатии кнопки, и иногда кнопка не была отключена достаточно быстро, и когда пользователь дважды щелкнул, произошло 2 события, которые были запущены.
Я взял тайм-аут Pangui и объединил оба метода, отключив кнопку и включив тайм-аут на всякий случай. И я создал простой плагин jQuery:
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;
}
И затем используйте его следующим образом:
$("#button1").singleClick(function () {
$(this).prop('disabled', true);
//...
$(this).prop('disabled', false);
})
/*
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
}
});
Решение, предоставленное @Kichrum, почти сработало для меня. Мне нужно было добавить e.stopImmediatePropagation(), чтобы предотвратить действие по умолчанию. Вот мой код:
$('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();
}
});
То, что я узнал, было старым, но работающим решением для современных браузеров. Работает не для переключения классов при двойном щелчке.
$('*').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();
}
});
"Easy Peasy"
$(function() {
$('.targetClass').dblclick(false);
});