精华内容
下载资源
问答
  • 嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件js阻止事件冒泡示例,大家参考使用吧
  • 在本篇文章里小编给大家整理的是关于JS如何阻止事件冒泡的相关知识点内容,有需要的朋友们可以学习下。
  • 主要介绍了JS阻止事件冒泡行为和闭包的方法的相关资料,需要的朋友可以参考下
  • 主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下
  • js阻止事件冒泡方法

    千次阅读 2017-10-25 14:04:13
    阻止事件冒泡方法

    阻止事件冒泡方法:

    方法一:

         return false;

    方法二:

          e.preventDefault()  //方法取消默认的行为

    方法三:

    e.stopPropagation() // 该方法阻止一次时间冒泡并且ie不支持
    e.cancelBubble=true;//ie的取消冒泡
                
    	//兼容方法
          (typeod e.stopPropagation =='function')? e.stopPropagation():e.cancelBubble=true;


    展开全文
  • 阻止事件冒泡方法

    2021-07-09 17:06:20
    阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件冒泡方法,不止事件向document上蔓延,但是默认事件任然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 2.event....

    阻止事件冒泡方法

    1.event.stopPropagation()方法

    这是阻止事件的冒泡方法,不止事件向document上蔓延,但是默认事件任然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开

    2.event.preventDefault()方法

    这是阻止默认事件的方法,调用此方法时,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素

    3.return false;

    这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件,不仅阻止了事件往上冒泡,而且阻止了事件本身

    展开全文
  • JS阻止事件冒泡方法

    千次阅读 2019-04-26 20:08:59
    阻止事件冒泡的方法 首先看看事件冒泡是什么? 事件冒泡代码结构上嵌套,在直系关系中;同一个事件绑定多个...阻止冒泡。 css样式代码 <style> .wrap { width: 400px; height: 400px; background: red; }...

    阻止事件冒泡的方法

    首先看看事件冒泡是什么?

    事件冒泡代码结构上嵌套,在直系关系中;同一个事件绑定多个元素(子元素,父元素…都绑定该事件),从子元素到父元素依次触发事件。代码很简单,就是三个父子关系的div,然后分别加了点击事件。阻止冒泡。

    • css样式代码
    <style>
    .wrap {
    width: 400px;
    height: 400px;
    background: red;
    }
    .box {
    width: 300px;
    height: 300px;
    background: greenyellow;
    margin-left: 300px;
    }
    .btn {
    width: 200px;
    height: 200px;
    margin-left: 500px;
    background: blue;
    }
    </style>
    
    • html标签代码
    <body> 
    <div class="wrap"> 
    <div class="box"> 
    <div class="btn"></div> 
    </div> </div>
    </body>
    
    • js代码块
      注意:一个元素对象;绑定一个事件;那有就只有一个事件模型;要么冒泡要么捕获
    <script>
    var wrap = document.getElementsByTagName('div')[0]
    var box = document.getElementsByTagName('div')[1]
    var btn = document.getElementsByTagName('div')[2]
    function addEvent(el, type, handle, bool) {
    // addEventlistener attachEvent
    if (el.addEventlistener) { // 非IE 9以上
    el.addEventlistener(type, handle, bool)
    } else if (el.attachEvent) {
    el.attachEvent('on' + type, function () {
    handle.call(el) // 改变this 指向;由默认的window变为当前的对象
    }, bool)
    } else { // 直接给元素对象绑定事件
    el['on' + type] = handle
    }
    }
    addEvent(wrap, 'click', function (e) {
    console.log('wrap')
    wrap.style.background = 'black';
    stop(e)
    }, false)
    addEvent(box, 'click', function (e) {
    console.log('box')
    box.style.background = 'black'
    stop(e)
    }, false)
    addEvent(btn, 'click', function (e) {
    console.log('btn')
    btn.style.background = 'black'
    stop(e)
    }, false)
    // 阻止冒泡方法封装
    function stop(e){
    e = e || window.event
    if (e.stopPropagation) {
    // 这里的e = 形参e
    e.stopPropagation()
    } else { // IE9以下
    // 这里的 e = window.event
    // 阻止默认时间 true阻止;false不阻止
    e.cancelBubble = true;
    }
    }
    </script>
    
    展开全文
  • js阻止事件冒泡

    2016-11-02 19:29:26
    js阻止事件冒泡

    自己做了个带遮罩层的弹窗,关闭的时候发现有BUG,调试后发现是冒泡问题,记录下来和大家一起分享阻止冒泡的几种方法。

    方法一:

    $("#txt").click(function(){
    alert("单击的是id为txt的button元素");
    return false;//阻止事件冒泡
    });
    

    方法二:

    $("#txt").click(function(){
            alert("单击的是id为txt的button元素");
            var e = window.event || event;
            if ( e.stopPropagation ){ //如果提供了事件对象,则这是一个非IE浏览器
                e.stopPropagation();
            }else{
            //兼容IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
    });
    

    方法三:

    $("#txt").click(function(e){
    alert("单击的是id为txt的button元素");
    e.stopPropagation();//阻止事件冒泡
    });<
    


    展开全文
  • 一、冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。 方法一:event.stopPropagation( ); 例如: &lt;div&gt;  &lt;p&gt;段落文本内容  &...
  • JS阻止事件冒泡

    千次阅读 2018-11-15 08:31:27
    JS阻止事件冒泡
  • 本篇文章主要介绍了javascript阻止事件冒泡和浏览器的默认行为。具有一定的参考价值,下面跟着小编一起来看下吧
  • Js阻止事件冒泡阻止默认事件 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这...
  • js阻止事件冒泡阻止默认事件方法,理解stopPropagation(),preventDefault(),return false的区别 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理...
  • JS 阻止事件冒泡

    2019-07-11 22:43:13
    通常在处理DOM事件时,为了阻止事件冒泡,这样写: ev.stopPropagation(); // ev 为事件回调函数的参数event 但有的时候却没有作用,子元素的clcik点击事件依然触发了父元素的clickl事件,解决方式: if(ev....
  • 1、什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个...
  • [size=medium]JavaScript停止冒泡阻止浏览器默认行为 事件兼容[/size] [code="js"] function myfn(e){ var evt = e ? e:window.event; } [/code] [size=medium]js停止冒泡[/size] [code="js&...
  • JQuery 提供了两种方式来阻止事件冒泡,Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作,下文有个不错的示例,需要的朋友可以参考下
  • 本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一、冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。方法一:event....
  • JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐、Operating以及Chrome都有针对性的判断,代码如下: function cancelBubble(evt) { // 阻止事件冒泡 ...
  • 前端js阻止事件冒泡

    2018-12-02 23:20:03
    title: 前端js阻止事件冒泡 date: 2018-4-21 20:27:24 tags: [js] categories: js keywords: 前端js阻止事件冒泡 记录在项目中遇到的问题 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...

空空如也

空空如也

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

js阻止事件冒泡的方法