用事件冒泡实现在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);
    }
}

原文地址:https://www.cnblogs.com/himonkey/p/11938424.html

时间: 2024-10-03 13:09:59

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

C# winform datagridview 内嵌控件值改变后立即触发事件,而不需要离开该单元格时才触发,此时需要用到dgv_CurrentCellDirtyStateChanged事件

以下是参考代码 //datagridview内嵌控件值修改事件 private void dgv_CurrentCellDirtyStateChanged(object sender, EventArgs e) { if (dgv.IsCurrentCellDirty) { dgv.CurrentCellDirtyStateChanged -= dgv_CurrentCellDirtyStateChanged; dgv.CommitEdit(DataGridViewDataErrorContex

JS中点击事件冒泡解析

关于Javascript中的点击事件冒泡的问题,很多初学者都处理不好. 什么是点击事件冒泡? 例: 今天我去小明家找他玩.正好小明.小明的爸爸.小明的爷爷在客厅一起看电视. 我对小明说:”咱们出去玩吧“. 小明十分乐意的回答到:”好啊“. 小明的爸爸听到后,说到:”把作业写完后在出去玩“. 小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“. 我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为. 这次之后,我和小明私下约定好.以后去找他玩的,都会去他房间里

事件冒泡的应用——jq on的实现

曾对jQuery中on的实现有所疑问,一直没有找到合适的实现方法,今日看<javascript高级程序设计>中的事件冒泡有了些思路. 针对于新增的DOM元素,JQ中若为其绑定事件就必须使用on方法,如$('#id').on('click','.item',function(){......}),这样当$('#id')被点击时,会发生事件冒泡,传递到$('#id')下的item并进行匹配,符合条件的会触发function(){.......}. 这里写一个简单的例子演示下: <!DOCTY

Javascript事件冒泡,没有想象中那么糟糕

Javascript事件冒泡,没有想象中那么糟糕  提到js事件,我们可能第一时间反应的就是“如何阻止事件冒泡”:但是事件冒泡真的是如我们想象的那么糟糕吗? 1. Event 对象  Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 2. 事件句柄 (Event Handlers)  指能够使 HTML 事件触发浏览器中的行为,比如点击(onclick).鼠标悬浮(onfocus)等 3. 什么是事件冒泡  一个对象(event.srcEle

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕

关于什么是事件冒泡和如何取消事件冒泡的讨论!

在学习jQuery的过程中我们肯定会碰到这样一个问题,那就是事件冒泡,那么,何为事件冒泡呢? 事件冒泡通俗点讲就是,当你的子元素和父元素注册了同一个事件的时候,当你激活子元素的时候,父元素也会跟着被激活, 显然,这并不是我们所需要的结果!所以我们就要想办法取消事件冒泡 具体实例如下 <body> <div id="mybigdiv"> 我是大div <div id="myid">我是小div</div> </di

JavaScript事件冒泡和事件委托

JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验为他人答疑解惑.我们知道JavaScript可以监控页面上元素的各种事件,常用的事件有很多,例如点击,鼠标移入.移出,元素改变等等.这次主要说一下事件冒泡及其一个比较酷的应用,事件委托.不做特殊说明,以下都在jQuery框架内执行. 事件冒泡 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的

事件冒泡 事件捕获 事件委托

在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止.事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止. 这么说是不是很抽象,其实就像我敲击了一下键盘,我在敲击键盘的同时,我是不是也敲击了这台电脑,我写个例子大家就明白了: <!DOCTYPE html> <html> <head&