jquery bind

Question

<div class="divs"> <div></div> <div></div> <div></div> <div></div> </div> 我想给class="divs"下面的每个div加个bind的点击事件, 然后点击当中的任何一个div的时候我想解除，除当前div以外的div的 bind事件，会有三秒的延时，等延时结束后其它div就恢复bind,这个怎么做（简单说就是点击某个div禁用掉其它div的所以点击功能）

Answer 1

(function() {
    var time = 3;
    var index = -1;
    $('.divs div').bind('click', function() {
        var _this = $(this);
        var thisIndex = $('.divs div').index(_this);
        if(time <= 0) {
            time = 3;
            index = -1;
        }
        if(index < 0) {
            index = thisIndex;
            timeCounter();
        }
        if(time > 0 && index != _this.index()) {
            return false;
        }
        //
        console.log(_this.text());
    });
    function timeCounter() {
        var start = setTimeout(function() {
            --time;
            if(time < 0) {
                clearTimeout(start);
                return false;
            }
            setTimeout(arguments.callee, 1000);
        }, 1000);
    }
})();

Answer 2

        $(window).load(function(){
            $(".divs div").bind("click",function(){
                var item=$(this);
                setTimeout(function(){
                $(".divs div").unbind("click");
                alert("移出其他事件");
                item.bind("click",function(){
                alert("只有我能点");
                })
                },3000);
            });
        });

HTML不变，将上面的代码加入js即可，我测试了，没问题。

Answer 3

 这样不行，取消unbind再bind就没效了

Answer 4

@Mi文: 可以的吧，你只需要把第一次触发时间的Element用变量保存下来，我觉得应该好做吧~

Answer 5

如果通过委托，则可以这样：

 

//通过事件委托来做（jQuery.fn.on）
var lockDiv;
$('.divs').on('click', 'div', function () {
    if (lockDiv != null && lockDiv != this) return;
    lockDiv = this;
    var self = $(this);
    alert('你点击的div的逻辑');
    setTimeout(function () {
        lockDiv = null;
    }, 3000);
});

 

考虑到性能，不要频繁的bind/unbind事件，通过在事件中判定是否禁止此次逻辑即可。

 

也可以这样：

//每个div绑定，适用于div各自事件逻辑不同
var cacheIndex = -1;
$('.divs>div').each(function (i) {
    $(this).on('click', function () {
        if (cacheIndex !== -1 && cacheIndex != i) {
            alert('你的逻辑');
            setTimeout(function () {
                cacheIndex = -1;
            });
        }
    });
});

多使用jQuery.fn.on少使用jQuery.fn.bind，jQuery.fn.bind API已被废弃（好像是在1.7之后）