У меня есть одна кнопка в li с идентификатором "my_id". Я прикрепил два события jQuery к этому элементу
1.
$("#my_id").click(function() {
alert('single click');
});
2.
$("#my_id").dblclick(function() {
alert('double click');
});
Но каждый раз это дает мне single click
Вам нужно использовать таймаут, чтобы проверить, есть ли другой клик после первого щелчка.
// Author: Jacek Becela
// Source: http://gist.github.com/399624
// License: MIT
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
return this.each(function(){
var clicks = 0, self = this;
jQuery(this).click(function(event){
clicks++;
if (clicks == 1) {
setTimeout(function(){
if(clicks == 1) {
single_click_callback.call(self, event);
} else {
double_click_callback.call(self, event);
}
clicks = 0;
}, timeout || 300);
}
});
});
}
Использование:
$("button").single_double_click(function () {
alert("Try double-clicking me!")
}, function () {
alert("Double click detected, I'm hiding")
$(this).hide()
})
<button>Click Me!</button>
EDIT:
Как указано ниже, предпочитайте использовать нативный dblclick событие: http://www.quirksmode.org/dom/events/click.html
Или тот, который предоставляется jQuery: http://api.jquery.com/dblclick/
Поведение события dblclick объясняется в Quirksmode.
Порядок событий для a dblclick:
Единственным исключением из этого правила является (конечно) Internet Explorer с их пользовательским порядком:
Как вы можете видеть, одновременное прослушивание обоих событий в одном элементе приведет к дополнительным вызовам вашего обработчика click.
Простая функция. Никакой jquery или другой рамки не требуется. Передавайте свои функции в качестве параметров
<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
<script>
function doubleclick(el, onsingle, ondouble) {
if (el.getAttribute("data-dblclick") == null) {
el.setAttribute("data-dblclick", 1);
setTimeout(function () {
if (el.getAttribute("data-dblclick") == 1) {
onsingle();
}
el.removeAttribute("data-dblclick");
}, 300);
} else {
el.removeAttribute("data-dblclick");
ondouble();
}
}
</script>
Я боюсь, что поведение зависит от браузера:
Нельзя привязывать обработчики к как события click и dblclick для тот же элемент. Последовательность события запускаются в зависимости от браузера браузеру, причем некоторые получают два нажмите события перед dblclick и другие - только один. Двойной клик чувствительность (максимальное время между клики, которые обнаруживаются как двойные клик) может варьироваться в зависимости от операционной системы и браузер, и часто настраивается пользователем.
http://api.jquery.com/dblclick/
Выполняя свой код в Firefox, alert() в обработчике click() не позволяет вам щелкнуть второй раз. Если вы удалите такое предупреждение, вы получите оба события.
Хорошо, чтобы дважды щелкнуть (дважды щелкните), вы должны сначала нажать один раз. Обработчик click() запускается при первом щелчке, и, поскольку появляется предупреждение, у вас нет возможности сделать второй щелчок, чтобы запустить обработчик dblclick().
Измените обработчики, чтобы сделать что-то отличное от alert(), и вы увидите поведение. (возможно, измените цвет фона элемента):
$("#my_id").click(function() {
$(this).css('backgroundColor', 'red')
});
$("#my_id").dblclick(function() {
$(this).css('backgroundColor', 'green')
});
Вместо того, чтобы использовать больше специальных состояний и setTimeout, оказывается, что есть собственное свойство, называемое detail, к которому вы можете получить доступ из объекта event!
element.onclick = event => {
if (event.detail === 1) {
// it was a single click
} else if (event.detail === 2) {
// it was a double click
}
};
Современные браузеры и даже IE-9 поддерживают его :)
Источник: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
Ни один из этих ответов не удовлетворил мои потребности, поэтому я создал решение, основанное на gist, отправленном @AdrienSchuler. Используйте это решение только тогда, когда вы хотите связать один клик и двойной щелчок по элементу. В противном случае я рекомендую использовать собственные click и dblclick прослушиватели.
Это различия:
setTimeout обработает обработчик click или doubleclick.JavaScript:
function makeDoubleClick(doubleClickCallback, singleClickCallback) {
var clicks = 0, timeout;
return function() {
clicks++;
if (clicks == 1) {
singleClickCallback && singleClickCallback.apply(this, arguments);
timeout = setTimeout(function() { clicks = 0; }, 400);
} else {
timeout && clearTimeout(timeout);
doubleClickCallback && doubleClickCallback.apply(this, arguments);
clicks = 0;
}
};
}
Использование:
var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));
Ниже приведено использование в jsfiddle, кнопка jQuery - это поведение принятого ответа.
Другое простое решение Vanilla, основанное на ответе A1rPun (см. его скрипку для решения jQuery, и оба в этом).
Похоже, что для того, чтобы НЕ вызывать обработчик одного щелчка, когда пользователь дважды щелкает, обработчик одного щелчка обязательно запускается после задержки...
var single = function(e){console.log('single')},
double = function(e){console.log('double')};
var makeDoubleClick = function(e) {
var clicks = 0,
timeout;
return function (e) {
clicks++;
if (clicks == 1) {
timeout = setTimeout(function () {
single(e);
clicks = 0;
}, 250);
} else {
clearTimeout(timeout);
double(e);
clicks = 0;
}
};
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);
Используйте отличный плагин jQuery Sparkle. Плагин дает вам возможность обнаруживать первый и последний клики. Вы можете использовать его для разграничения между кликом и dblclick, обнаружив, что первый щелчок был сделан за кликом.
Проверьте это на http://balupton.com/sandbox/jquery-sparkle/demo/
Здесь альтернатива кода jeum для произвольного количества событий:
var multiClickHandler = function (handlers, delay) {
var clicks = 0, timeout, delay = delay || 250;
return function (e) {
clicks++;
clearTimeout(timeout);
timeout = setTimeout(function () {
if(handlers[clicks]) handlers[clicks](e);
clicks = 0;
}, delay);
};
}
cy.on('click', 'node', multiClickHandler({
1: function(e){console.log('single clicked ', e.cyTarget.id())},
2: function(e){console.log('double clicked ', e.cyTarget.id())},
3: function(e){console.log('triple clicked ', e.cyTarget.id())},
4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
// ...
}, 300));
Это необходимо для cytoscape.js.
Я написал простой плагин jQuery, который позволяет использовать пользовательское событие "singleclick", чтобы разделить один клик с двойным щелчком:
https://github.com/omriyariv/jquery-singleclick
$('#someDiv').on('singleclick', function(e) {
// The event will be fired with a small delay.
console.log('This is certainly a single-click');
}
Как отличить одиночные клики от двойных кликов на одном и том же элементе?
Если вам не нужно смешивать их, вы можете положиться на click и dblclick и каждый dblclick справится со своей задачей.
При попытке смешать их возникает проблема: событие dblclick фактически также инициирует событие click, поэтому вам необходимо определить, является ли одиночный щелчок "автономным" одиночным щелчком или частью двойного щелчка.
Кроме того: вы не должны использовать и click и dblclick для одного и того же элемента:
Нецелесообразно привязывать обработчики к событиям click и dblclick для одного и того же элемента. Последовательность запускаемых событий варьируется от браузера к браузеру, причем некоторые из них получают два события щелчка до dblclick, а другие - только одно. Чувствительность к двойному щелчку (максимальное время между щелчками, определяемое как двойной щелчок) может варьироваться в зависимости от операционной системы и браузера и часто настраивается пользователем.
Источник: https://api.jquery.com/dblclick/
Теперь о хороших новостях:
Вы можете использовать свойство detail события, чтобы определить количество кликов, связанных с событием. Это позволяет легко обнаружить двойные щелчки внутри click.
Проблема остается в обнаружении одиночных щелчков и в том, являются ли они частью двойного щелчка. Для этого мы вернулись к использованию таймера и setTimeout.
Оборачивая все это вместе с использованием атрибута данных (чтобы избежать глобальной переменной) и без необходимости самостоятельно подсчитывать количество кликов, мы получаем:
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>
<div id="log" style="background: #efefef;"></div>
<script>
var clickTimeoutID;
$( document ).ready(function() {
$( '.clickit' ).click( function( event ) {
if ( event.originalEvent.detail === 1 ) {
$( '#log' ).append( '(Event:) Single click event received.<br>' );
/** Is this a true single click or it it a single click that part of a double click?
* The only way to find out is to wait it for either a specific amount of time or the 'dblclick' event.
**/
clickTimeoutID = window.setTimeout(
function() {
$( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
},
500 // how much time users have to perform the second click in a double click -- see accessibility note below.
);
} else if ( event.originalEvent.detail === 2 ) {
$( '#log' ).append( '(Event:) Double click event received.<br>' );
$( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
window.clearTimeout( clickTimeoutID ); // it a dblclick, so cancel the single click behavior.
} // triple, quadruple, etc. clicks are ignored.
});
});
</script>
Потребовалось время, чтобы найти удовлетворительное решение, надеюсь, это поможет!
Мне нравится избегать jquery (и других 90-140k lib), и, как отметили браузеры, сначала обработайте onclick, так что вот что я сделал на созданном мной веб-сайте (этот пример также охватывает получение локального местоположения xy) p >
clicksNow-0; //global js, owell
function notify2(e, right) { // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');
// offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;
//NScape
if (document.layers || document.getElementById&&!document.all) {
xx= e.pageX;
yy= e.pageY;
} else {
xx= e.clientX;
yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;
clicksNow++;
// 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}
function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
... handle, etc ...
}
надеюсь, что поможет
это сработало для меня -
var clicked=0;
function chkBtnClcked(evnt) {
clicked++;
// wait to see if dblclick
if (clicked===1) {
setTimeout(function() {
clicked=0;
.
.
}, 300); // test for another click within 300ms
}
if (clicked===2) {
stopTimer=setInterval(function() {
clicked=0;
.
.
}, 30*1000); // refresh every 30 seconds
}
}
usage-
<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)" title="Click for next pic; double-click for slide show"></div>
Просто разместите собственный HTML-ответ на тот случай, если вам понадобится простой и HTML-код.
<p ondblclick="myFunction()" id = 'id'>Double-click me</p>
У этого, конечно, есть нативные параметры Jquery. то есть... $('#id').attr('ondblclick',function(){...}) или, как указано ранее, $('#id').dblclick(function(){...});