这是包含所有内容的 html 代码(css/js) 鼠标事件工作正常。我面临的唯一问题是 需要按两次一个键(类似于双击，即非常 快速发生预期行为)。我在这里做错了什么？
<html>
<head>
<title>Example</title>
<style type="text/css">
img {
width: 960px;
height: 655px;
margin-bottom: 10px;
}
html {
max-width: 100%;
}
body {
padding: 0;
margin-top: 10px;
border-top: 10px;
margin-bottom: 0px;
border-bottom: 0px;
overflow-x: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<link rel="shortcut icon" href="smiley.ico"></link>
</head>
<body>
<IMG SRC="foto001.jpg" />
<IMG SRC="foto002.jpg" />
<IMG SRC="foto003.jpg" />
<IMG SRC="foto004.jpg" />
<IMG SRC="foto005.jpg" />
<IMG SRC="foto006.jpg" />
<IMG SRC="foto007.jpg" />
<IMG SRC="foto008.jpg" />
<IMG SRC="foto009.jpg" />
<IMG SRC="foto010.jpg" />
<IMG SRC="foto011.jpg" />
<IMG SRC="foto012.jpg" />
<IMG SRC="foto013.jpg" />
<IMG SRC="foto014.jpg" />
<IMG SRC="foto015.jpg" />
<IMG SRC="foto016.jpg" />
<IMG SRC="foto017.jpg" />
<IMG SRC="foto018.jpg" />
<IMG SRC="foto019.jpg" />
<IMG SRC="foto020.jpg" />
<IMG SRC="foto021.jpg" />
<IMG SRC="foto022.jpg" />
<IMG SRC="foto023.jpg" />
<IMG SRC="foto024.jpg" />
<IMG SRC="foto025.jpg" />
<IMG SRC="foto026.jpg" />
<IMG SRC="foto027.jpg" />
<IMG SRC="foto028.jpg" />
<IMG SRC="foto029.jpg" />
<IMG SRC="foto030.jpg" />
<script>
var puloSeta = 9; // 9 pixels
// verifies mouse events
var clicked = false, clickY;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
e.preventDefault();
clicked = true;
clickY = e.pageY;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'grabbing');
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}
// idleTime counts the time the system is idle
idleTime = 0;
idleTimeKeyUp = 0;
minhamatriz = [ 0,
665, 1330, 1995, 2660, 3325,
3990, 4655, 5320, 5985, 6650,
7315, 7980, 8645, 9310, 9975,
10640, 11305, 11970, 12635, 13300,
13965, 14630, 15295, 15960, 16625,
17290, 17955, 18620, 19285 ];
$(window).bind('mousewheel DOMMouseScroll', function(e) {
// Handles the idle timer on mouse wheel movement
idleTime = -2.0;
});
// Increment the idle time counter every minute.
var myVar = setInterval(timerIncrement, 100); // some time
$(document).ready(function () {
// Handles the idle timer on mouse clicks
$(this).mousedown (function (e) { idleTime = -5000000; });
$(this).mouseup (function (e) { idleTime = 0; });
// Handles the idle timer on keypress movement.
$(this).keypress(function (e) {
//idleTimeKeyUp = 0;
if (e.keyCode == 36) { // Home key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop(0);
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 35) { // End key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop($(document).height());
$('body').removeClass('.stop-scrolling');
}
if (e.keyCode == 36 && e.which == 0) { // Home key
e.preventDefault();
$('body').addClass('.stop-scrolling');
$(window).scrollTop(0);
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 35 && e.which == 0){ // End key
$('body').addClass('.stop-scrolling');
$("html, body").scrollTop($(document).height());
e.preventDefault();
$('body').removeClass('.stop-scrolling');
}
else if (e.keyCode == 38 && e.which == 0) { // Up-arrow key
idleTimeKeyUp = -1;
$('body').addClass('.stop-scrolling');
e.preventDefault(); // essential to avoid default handler
var top = $(window).scrollTop();
$(window).scrollTop(top - puloSeta);
$('body').removeClass('.stop-scrolling');
puloSeta = 45;
}
else if (e.keyCode == 40 && e.which == 0) { // Dn-arrow key
idleTimeKeyUp = -1;
$('body').addClass('.stop-scrolling');
e.preventDefault(); // Essential to avoid default handler
var top = $(window).scrollTop();
$(window).scrollTop(top + puloSeta);
$('body').removeClass('.stop-scrolling');
puloSeta = 45;
}
else if (e.keyCode == 104 || e.which == 104) { // "h" key pressed
e.preventDefault();
alert("posicion en pixeles: " + $(window).scrollTop());
//return false;
}
else if (e.keyCode == 0 && e.which == 91) { // "[" pressed
$('body').addClass('.stop-scrolling');
e.preventDefault();
var y = $(window).scrollTop();
$(window).scrollTop(y-1);
$('body').removeClass('.stop-scrolling');
//return false;
}
else if (e.keyCode == 0 && e.which == 93) { // "]" pressed
$('body').addClass('.stop-scrolling');
e.preventDefault();
var y = $(window).scrollTop();
$(window).scrollTop(y+1);
$('body').removeClass('.stop-scrolling');
//return false;
}
else {
idleTime = -5000000;
//$('html, body').stop().animate({ scrollTop: posicaoFinal }, 150);
}
});
$(this).keydown (function (e) {
idleTime = -5000000;
//var myVar = setInterval(timerIncrement, 100); // some time
//clearInterval(myVar);
});
$(this).keyup (function (e) { idleTime = idleTimeKeyUp; puloSeta = 9; });
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime >= 4) { // some user defined time
processing(); }
}
function processing() {
var posicao = document.body.scrollTop;
var posicaoFinal = valorcerto(minhamatriz, posicao);
//old version, without animate
//$("html, body").scrollTop(posicaoFinal);
$('html, body').stop().animate({ scrollTop: posicaoFinal }, 120);
if (posicaoFinal >= posicao) {
$('html, body').stop().animate({ scrollTop: posicaoFinal+1 }, 120);
}
}
function valorcerto(matriz, laposicion) {
if (matriz.indexOf(laposicion) != -1) {
// position is located inside the array
return parseInt(laposicion);
}
var fim = matriz.length-1;
for (i=0; i<fim; i++) {
var limiteA = matriz[i];
var limiteB = matriz[i+1];
if (laposicion > limiteA && laposicion < limiteB) {
// position between limiteA and limiteB
var diffA = laposicion - limiteA;
var diffB = limiteB - laposicion;
if (diffA == diffB) {
// position is equidistant to both points
return parseInt(laposicion);
}
if (diffA < diffB) {
// position is closer to limiteA
return parseInt(limiteA);
}
else {
// position is closer to limiteB
return parseInt(limiteB);
}
}
}
}
</script>
</body>
</html>
最佳答案
你可以引用这个:
https://api.jquery.com/dblclick/
基本上:
//do something like this
$(this).on("dblclick", function(){});
或者
$(this).dblclick(function(){});
关于jquery 按两次键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38342512/