4

我有两张图片，每张图片都包含在一个链接中。如果鼠标按下超过一定时间，我想防止彩盒触发。我注意到 colorbox 仅在 mouseup 时触发。

我一直在尝试将 setTimeout 函数与计时器一起使用，然后从该图像中删除颜色框，然后在 mouseup 上将颜色框“重新附加”到该图像，这样如果 setTimeout 没有发生，它可以再次触发。

HTML：

<a class="colorbox" href="..."><img src="..." /></a>

<a class="colorbox" href="..."><img src="..." /></a>

JS：

$('a.colorbox').colorbox();

var timer;

$('a.colorbox').on('mousedown', function(e) {

    var this_colorbox = $(this);

    timer = setTimeout(function() {
        this_colorbox.colorbox.remove();//this doesn't work
    }, 1500);

}).on('mouseup', function(e) {

    clearTimeout(timer);

});​

//"Reattach colorbox"??

这是一个小提琴：http: //jsfiddle.net/mydCn/

我遇到的问题是 $.colorbox.remove(); （或我的尝试 this_colorbox.colorbox.remove();) 从所有元素中删除颜色框。我怎么能“重新附加颜色框”到该图像而不是再次调用每个元素的函数（当有很多图像时这样做会影响性能，不是吗？）？

4

1 回答 1

5

我知道了！我可以只添加和删除类。我会发布答案，所以它可能对某人有帮助。

http://jsfiddle.net/mydCn/1/

$('a.colorbox').colorbox();

var timer;
var time_completed = 0;

$('a.colorbox').each(function() {
    $(this).on('click', function(e) {
        if (time_completed === 0) {
            e.preventDefault();
            $(this).removeClass('colorbox cboxElement');
        } else if (time_completed == 1) {
            $(this).addClass('colorbox cboxElement');
            time_completed = 0;
        }
    });

    $(this).on('mousedown', function(e) {
        timer = setTimeout(function() {
            time_completed = 1;
        }, 500);
    }).on('mouseup', function(e) {
        clearTimeout(timer);
        if (time_completed == 1) {
            $(this).click();
        }
    });
});​
于 2012-08-15T00:06:12.143 回答