用事件冒泡实现在div内点击,不触发事件,当在div外点击时才触发事件

讲解

http://caibaojian.com/javascript-stoppropagation-preventdefault.html

使用案例

在div内点击,不触发 一个事件,当在div外点击时才触发事件。
这比按钮节流和缓冲都要好的多

  • 自己使用的是一个form控件中的输入不触发,当输入完点击其他地方时触发计算,将结果赋值给form中不可编辑的控件中。

具体代码:

function div10_onClick(event) {
    //点击#Click时要阻止冒泡,否则.pop是不显示的,
    //因为冒泡了,会执行到下面的方法。
    function stopPropagation(e) {
        var ev = e || window.event;
        if (ev.stopPropagation) {
            ev.stopPropagation();
        }
        else if (window.event) {
            window.event.cancelBubble = true;//兼容IE
        }
    }
    function jie() { // 点击其他地方时触发合计运算
        // 开始计算
        // 取统计表单的值
        
        ...
        ...
        ...
        
        // 可以再次绑定计算结果事件儿
        sumDivBindType = true;
        $(document).unbind('click', jie);
    
    }
    
    // 事件冒泡,并判断是否绑定,true时可以绑定
    stopPropagation(event);
    if(sumDivBindType == true) {
        sumDivBindType = false;
        $(document).bind('click', jie);
    }
}
posted @ 2019-11-26 21:01  Monkey_Hi_猴子喂  阅读(954)  评论(0编辑  收藏  举报