2013-09-03 5 views
5

Я знаю, что «mousedown» - это когда пользователь нажимает на мышь, «mouseup» - это когда пользователь освобождает мышь. Но я хочу прослушать событие после того, как пользователь нажимает мышь и удерживает ее, пока она не отпустится. Есть идеи?Слушайте событие удержания мыши на веб-сайте?

+0

Слушайте для обоих, если событие MouseDown называется, но не MouseUp, то пользователь держит мышь , –

+0

Как я могу постоянно что-то делать во время мыши? – user2268624

+0

@ user2268624 Что вы имеете в виду? Когда вы получаете mousedown, установите переменную и/или планируете что-то случится с таймером .. и делайте наоборот, когда вы нажимаете мышь. Чак ты спрашиваешь? – xaxxon

ответ

5

Если вы хотите, чтобы состояние держать, то это будет состояние, когда вы находитесь в mousedown Состояние события какое-то время. Это состояние существует, когда вы нажимаете mousedown, но не mouseup. Следовательно, вам нужно взять переменную, которая записывает текущее состояние события.

JS

$('div').on('mousedown mouseup', function mouseState(e) { 
    if (e.type == "mousedown") { 
     //code triggers on hold 
     console.log("hold"); 
    } 
}); 

Working Fiddle

+0

Нет необходимости в тройном - '==' всегда возвращает логическое значение. –

+0

@ Qantas94Heavy ya спасибо .. :) –

2

От jquery.com:

HTML:

<p>Press mouse and release here.</p> 

Автор сценария:

$("p").mouseup(function(){ 
    $(this).append('<span style="color:#F00;">Mouse up.</span>'); 
}).mousedown(function(){ 
    $(this).append('<span style="color:#00F;">Mouse down.</span>'); 
}); 

Полный URL: http://api.jquery.com/mousedown/

4

Попробуйте

Добавить соответствующие события мыши к folowing функций

mouse = false; 
function mousedown() 
{ 
    mouse = true; 
    callEvent(); 
} 
function mouseup() 
{ 
    mouse =false; 
} 
function callEvent() 
{ 
if(mouse) 
{ 
    // do whatever you want 
    // it will continue executing until mouse is not released 


    setTimeout("callEvent()",1); 
} 
else 
return; 
} 
0

var setint = ''; 
 
$(document).ready(function() { 
 
var val = 0; 
 
$('#hold').on('mousedown',function (e) { 
 
    clearInterval(setint); 
 
    val = 0; 
 
    setint = setInterval(function() { 
 
     $("#putdata").val(++val); 
 
     console.log("mousehold"); 
 
    },50); 
 
}); 
 
$('#hold').on("mouseleave mouseup", function() { 
 
    val = 0; 
 
    $("#putdata").val(val); 
 
    clearInterval(setint); 
 
}); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<input type="text" id="putdata" /> 
 
<input type="button" value="mouse-hold" id="hold" /> 
 
</body> 
 
<html>