精华内容
下载资源
问答
  • js阻止冒泡

    2016-02-26 17:04:43
    js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
  • JS阻止冒泡

    2017-09-27 16:03:18
    js阻止冒泡 冒泡,顾名思义,就像是水里的泡泡慢慢向上浮动,并且是慢慢的变大。这和我们遇到的事件时一样的,再说直白一点就是儿子知道一件事,他会自动去告诉爸爸,爸爸又会去告诉爷爷,而这个自动就是系统默认的...
    js阻止冒泡
    冒泡,顾名思义,就像是水里的泡泡慢慢向上浮动,并且是慢慢的变大。这和我们遇到的事件时一样的,再说直白一点就是儿子知道一件事,他会自动去告诉爸爸,爸爸又会去告诉爷爷,而这个自动就是系统默认的,所有我们就是要阻止系统的这一特点。
    在冒泡的事件中,一般是使用嵌套的比较多,或者当我们给某一个或者多个标签绑定事件时会引起另一个事件的相应,但是我们不想让别的事件来响应,所以这个时候就需要组织冒泡了。
    我们就用一个简单的案例来说明:

    (1)这是div嵌套div在嵌套一个a标签
    <div id="div1" class="div1">最外层
        <div id="div2" class="div2">中间层层
            <a id="a1" href="***">最里层</a>
        </div>
    </div>
    (2)js内容,给每div个a标签设置点击事件
    <script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var a1 = document.getElementById("a1");
        div1.addEventListener("click", function (event) {
            alert("最外层");
        });
        div2.addEventListener("click", function (event) {
            alert("中间层");
    
        });
        a1.addEventListener("click", function (event) {
            alert("最里层");
            event.stopPropagation();
        });
    </script>
    运行的结果证明,当我们不设置阻止冒泡的时候,点击最里层,alert弹出的顺序是 最里层→中间层→最外层,然后会跳转到
    a标签的链接地址。那么这里我们就开始设置阻止冒泡

    (1)event.stopPropagation()

    a1.addEventListener("click", function (event) {
            alert("最里层");
            event.stopPropagation();
        });
    给a标签设置 event.stopPropagation(),点击结果是,弹出 最里层并且跳转地址,中间层和最外层则不会弹出。

    (2)event.preventDefault()
    	
    a1.addEventListener("click", function (event) {
            alert("最里层");
            event.preventDefault();
        });
    给a标签设置event.preventDefault(),点击结果是,弹出 最里层→中间层→最外层,但不会跳转页面。
    
    
    	那么说,stopPropagation阻止了冒泡事件,但是没有阻止默认事件,也就是说可以跳转,
    	preventDefault,没有阻止事件的冒泡,但是阻止了默认的事件,就是不可以跳转页面。
    展开全文
  • javascript 阻止冒泡

    2019-10-06 04:08:13
    JS 阻止冒泡 functionstopBubble(e){ //如果提供了事件对象,则这是一个非IE浏览器 if(e&&e.stopPropagation){  //因此它支持W3C的stopPropagation()方法  e.stopPropagation(); }else{  //...
    JS  阻止冒泡
    function  stopBubble(e) {
    //如果提供了事件对象,则这是一个非IE浏览器
    if (e && e.stopPropagation) {
       //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
    else  {
       //否则,我们需要使用IE的方式来取消事件冒泡
      window.event.cancelBubble =  true ;
    }
    return  false ;
    }

    转载于:https://www.cnblogs.com/zlp520/p/4223422.html

    展开全文
  • js 阻止冒泡

    2019-10-31 09:17:07
    event.stopPropagation();//阻止冒泡

     

    <div class='background' style='background:red;width:100px;height:100px'>
    
        <div id='form' style='background:#fff;width:50px;height:50px;></div>
    
    </div>
    //event.stopPropagation();//阻止冒泡
    
      $('.background').click(function(){
        console.log(1)
        event.stopPropagation();
      })
      $('#form').click(function(){
        console.log(2)
        event.stopPropagation();
      })

    展开全文
  • js阻止冒泡 jquery阻止冒泡

    千次阅读 2013-11-06 10:16:52
    js阻止冒泡 jquery阻止冒泡 js阻止当前对象默认动作

    love聊网络那点事http://weibo.com/u/3923942488


    Js阻止冒泡

    在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。

    function stopPro(evt){

        var e = evt || window.event;

        //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,

        //可以取消发生事件的源元素的默认动作。

        //window.event?e.returnValue = false:e.preventDefault();

        window.event?e.cancelBubble=true:e.stopPropagation();

    }

    或者:

    function cancelBubble(e) {
        var evt = e ? e : window.event;
        if (evt.stopPropagation) {
            //W3C
            evt.stopPropagation();
        }
        else {
            //IE
            evt.cancelBubble = true;
        }

    Jquery是屏蔽了它们之间的区别。

    JQuery 提供了两种方式来阻止事件冒泡。

    方式一:event.stopPropagation();

            $("#div1").mousedown(function(event){
                event.stopPropagation();
            });

    方式二:return false;

            $("#div1").mousedown(function(event){
                return false;
            });

    Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。

    例如:

    $("a").click(function(event){
                        event.preventDefault(); //阻止默认动作即该链接不会跳转。
                        alert(4);//但是这个还会弹出
                        event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用
                        return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身
                    });


    但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

    场景应用:Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。


    Jquery案例:

            <script src="js/jquery-1.4.3.js"></script>
            <script type="text/javascript">
            $(function(){
                $("#aa").click(function(event){
                        alert("aa");
                        event.preventDefault();
                        event.stopPropagation();
                        alert(3);
                    });
                    
                    
                $("#ee").click(function(){
                        alert("ee");
                    });
                    
                    $("a").click(function(event){
                        event.preventDefault();
                        alert(4);
                        event.stopPropagation();
                        return false;
                    });
            });
        </script>
        </head>
        <body>
            <div id="ee">
                aaaaaaa
                <input id="aa" type="button" value="test" />
                <a href="http://baidu.com">baidu.com</a>
            </div>
        </body>


    Js案例:

            function tt(){
                alert("div");
            }
            
            function ttt(){
                var e = arguments.callee.caller.arguments[0] || window.event;
                window.event?e.returnValue = false:e.preventDefault();
                alert(3);
                window.event?e.cancelBubble:e.stopPropagation();
                alert(4);
            }
        </script>
        </head>
        <body>
            <div onclick = "tt();">
                ccccc
                <a href="http://baidu.com" οnclick="ttt();">baidu.com</a>
            </div>


    W3C:顺便复习下Event:

    标准 Event 方法

    下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

    方法描述IEFOW3C
    initEvent()初始化新创建的 Event 对象的属性。No19Yes
    preventDefault()通知浏览器不要执行与事件关联的默认动作。No19Yes
    stopPropagation()不再派发事件。No19Yes


    标准 Event 属性

    下面列出了 2 级 DOM 事件标准定义的属性。

    属性描述IEFOW3C
    bubbles返回布尔值,指示事件是否是起泡事件类型。No19Yes
    cancelable返回布尔值,指示事件是否可拥可取消的默认动作。No19Yes
    currentTarget返回其事件监听器触发该事件的元素。No19Yes
    eventPhase返回事件传播的当前阶段。   Yes
    target返回触发此事件的元素(事件的目标节点)。No19Yes
    timeStamp返回事件生成的日期和时间。No19Yes
    type返回当前 Event 对象表示的事件的名称。619Yes

    IE 属性

    除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:

    属性描述
    cancelBubble如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
    fromElement对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
    keyCode对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
    offsetX,offsetY发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
    returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
    srcElement对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
    toElement对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
    x,y事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

    鼠标 / 键盘属性

    属性描述IEFOW3C
    altKey返回当事件被触发时,"ALT" 是否被按下。619Yes
    button返回当事件被触发时,哪个鼠标按钮被点击。619Yes
    clientX返回当事件被触发时,鼠标指针的水平坐标。619Yes
    clientY返回当事件被触发时,鼠标指针的垂直坐标。619Yes
    ctrlKey返回当事件被触发时,"CTRL" 键是否被按下。619Yes
    metaKey返回当事件被触发时,"meta" 键是否被按下。No19Yes
    relatedTarget返回与事件的目标节点相关的节点。No19Yes
    screenX返回当某个事件被触发时,鼠标指针的水平坐标。619Yes
    screenY返回当某个事件被触发时,鼠标指针的垂直坐标。619Yes
    shiftKey返回当事件被触发时,"SHIFT" 键是否被按下。619Yes


    
    展开全文
  • Javascript 阻止冒泡

    2015-02-02 13:04:59
    if(e.stopPrapagation){ //判断是否有效,IE不支持 e.stopPrapagation(); } e.cancelBubble=true; //IE的阻止冒泡的方法;
  • js阻止冒泡阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值...
  • 嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧
  • js阻止冒泡;阻止JS事件穿透 js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:...
  • 本文实例为大家分享了js阻止冒泡和默认事件方法,供大家参考,具体内容如下 阻止冒泡。冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止...
  • js阻止冒泡事件

    2012-12-06 09:12:36
    js阻止冒泡事件的方法有2种。 事件冒泡:当一个元素上的事件被触发时,同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素:任何一个事件的目标元素...
  • js阻止冒泡的兼容写法
  • 主要介绍了JS阻止冒泡事件以及默认事件发生的简单方法,有需要的朋友可以参考一下
  • js阻止冒泡问题

    2019-05-10 16:00:03
    如果阳普医疗阻止冒泡: 运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层 ---->然后再链接到XX. 这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个...
  • JavaScript阻止冒泡函数

    2020-03-13 08:18:47
    function stopPropagation(e){ ... if(e.stopPropagation){//W3C阻止冒泡的方法 e.stopPropagation(); }else{ e.cancelBubble = true;//IE阻止冒泡的方法 } document.getElementById("need_hide").onc...
  • Javascript阻止冒泡方法

    2019-01-14 23:29:39
    阻止冒泡的方法 w3c的方法:(火狐、谷歌、IE11) event.stopPropagation() IE10以下则是: event.cancelBubble= true
  • js阻止冒泡的方式-完整版 直接讲结论: 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || arguments.callee.caller.arguments[0]; e.stopPropagation(); 2....
  • 文章目录·阻止冒泡·阻止默认事件 ·阻止冒泡 ·阻止默认事件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,757
精华内容 13,902
关键字:

js阻止冒泡