美文网首页
js 阻止事件冒泡(不触发父级元素的事件)

js 阻止事件冒泡(不触发父级元素的事件)

作者: 发光驴子 | 来源:发表于2017-10-09 23:16 被阅读0次
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
  window.onload=function () {
    var oBtn=document.getElementById("btn1");
    var oDiv=document.getElementById("div1");
    oBtn.onclick=function (ev) {
        oDiv.style.display="block";
        var oEvent=ev||event;
        //这就是阻止事件冒泡,ev事件,可以是任意参数
        //js阻止事件冒泡的意义就是,不触发父级元素的事件
        oEvent.cancelBubble=true;
    }
    document.onclick=function () {
        oDiv.style.display='none';
    }
  }
</script>
<style>
    #div1{
        width:100px;
        height:150px;
        background: #ccc;
        display: none;
    }
</style>
<body>
<input type="button" id="btn1" value="显示">
<div id="div1">

</div>
</body>
</html>

相关文章

  • js事件监听 事件冒泡 和css3新增

    事件监听:事件捕获 目标阶段 冒泡阶段 事件冒泡:当使用事件冒泡时,子元素先触发,父级元素后触发。 //阻止事件冒...

  • Jqeury 阻止事件冒泡

    Jqeury 阻止事件冒泡 在子元素和父元素上同时绑定相同的事件,在触发子元素事件的同时,事件会冒泡继续往上会触发...

  • js 阻止事件冒泡(不触发父级元素的事件)

  • Vue知识点笔记2

    Vue指令之事件修饰符:.stop 阻止冒泡(写在子元素中阻止其触发父元素事件).prevent 阻止默认事件.c...

  • 事件其他

    1. 阻止事件冒泡 默认情况下,触发子元素的事件时,会同时触发父元素相同的事件,这就叫做事件冒泡 e.stopPr...

  • js事件处理机制

    js事件的三个阶段分别为:捕获、目标、冒泡事件捕获:父级元素先触发,子元素后触发W3C--addEventList...

  • stopPropagation和stopImmediatePro

    都可以阻止事件冒泡(子元素向父元素冒泡) stopImmediatePropagation阻止事件冒泡并且阻止相同...

  • uni-app 事件修饰符

    事件修饰符 修饰符说明stop 阻止事件冒泡阻止子元素的事件触发时同时触发其祖宗元素的事件capture 阻止事件...

  • 多级菜单增删改

    问题1:出现事件冒泡,父级元素的点击事件传递给了子元素。 解决方法:阻止事件冒泡 方法一:function(e){...

  • 什么是事件冒泡/捕获?

    事件冒泡:子元素事件的触发会影响父元素事件开关事件冒泡:A:开启事件冒泡:element.addEventList...

网友评论

      本文标题:js 阻止事件冒泡(不触发父级元素的事件)

      本文链接:https://www.haomeiwen.com/subject/oakpyxtx.html