我试图用光标下的小动画来绑定每次点击“body”：http: //jsfiddle.net/Nippon/pARR3/
var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
$('html').click(function(e){
e.preventDefault();
$(".click").addClass("clickOn");
clearTimeout(timeoutHandle);
setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
});
问题是我不知道如何在同一次点击中添加和删除它。现在我正在使用 setTimeout ，它适用于慢速点击和没有双击。当你开始像疯子一样点击时，动画就会下地狱。
有人可以帮我清理我弄的这个烂摊子并使其平滑/防双击吗？
我采取了稍微不同的方法。我为每次点击创建了一个新元素。这里有两个选项：
$(document).bind('mousemove', function (e) {
$('#clickWrapper').css({
left: e.pageX - 20,
top: e.pageY - 20
});
});
$('html').click(function (e) {
e.preventDefault();
var $div = $('<div class="click"></div>')
.appendTo('#clickWrapper')
.addClass('clickOn');
setTimeout(function () {
$div.remove();
}, 1000);
});
var left;
var top;
$(document).bind('mousemove', function (e) {
left = e.pageX - 20,
top = e.pageY - 20
});
$('html').click(function (e) {
e.preventDefault();
var $div = $('<div class="click"></div>')
.css({ top: top, left:left})
.appendTo('#clickWrapper')
.addClass('clickOn');
setTimeout(function () {
$div.remove();
}, 1000);
});
var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
$('html').click(function(e){
e.preventDefault();
$(".click").addClass("clickOn").delay(1000).removeClass("clickOn");
clearTimeout(timeoutHandle);
setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
});
那应该行得通。C
为了防止双击，您可以简单地暂时删除处理程序。如果您稍后决定暂时停止观看鼠标移动，则可以使用相同的技术。 setTimeout然而，这里需要。您可以直接使用，也可以使用内部库。
$(document).bind('mousemove', function (e) {
$('#clickWrapper').css({
left: e.pageX - 20,
top: e.pageY - 20
});
});
function toggleBubble(state) {
if (state) {
$(".click").addClass("clickOn");
$('html').off('click', showBubble);
console.log("add");
} else {
$(".click").removeClass("clickOn");
$('html').on('click', showBubble);
console.log("rm");
}
}
function showBubble(e) {
toggleBubble(true);
setTimeout(toggleBubble.bind(null, false), 1000);
return false;
}
$('html').on('click', showBubble);