【Javascript】【事件】阻止全部元素，子元素，或父容器的默认行为

这里以右键菜单为例，默认网页中的所有元素，右键都会弹出菜单 在事件冒泡过程中，只要有一个元素的事件处理器阻止了默认行为，默认行为便会被阻止 在事件冒泡过程中，如果一个元素停止了冒泡，那么其父元素即使绑定了事件处理器，也不会执行 具体原理请先学习javascript中的事件捕获，事件冒泡机制，下篇文章会专门补上javascript的事件机制 注意：类似elem.onevent = function(e)这种格式的处理器，都是在事件冒泡阶段处理的 想要在事件捕获阶段添加事件处理器，可以通过elem.addEventListener(type,true)来添加

下面我们通过详细的代码来进行测试 如果你能够弄清楚所有情景，说明你对javascript的事件机制和默认行为已经理解透了

页面如下，白色为document，黄色为parent，橙色为child

    
        

            

        
    

    
        #parent {
            width: 50%;
            height: 50%;
            background: yellow;
        }

        #child {
            width: 20%;
            height: 20%;
            background: orange;
        }
    

阻止全部元素弹出菜单

    
        $(() => {
            let parent = document.querySelector("#parent");
            let child = document.querySelector("#child");
            document.oncontextmenu = function (e) {
            	 //child和parent没有阻止事件冒泡，不管在哪里点击，最后document都会接收到事件
            	 //阻止默认行为
                e.preventDefault();
            };
        });
    

只允许parent弹出菜单

            parent.oncontextmenu = function (e) {
            	//如果在parent区域内点击
                //parent阻止事件冒泡，document不会再处理事件，则默认行为不会被document的处理器阻止
                e.stopPropagation();
            };
            document.oncontextmenu = function (e) {
                //如果在parent之外的区域点击，document仍然可以接收到事件
                //阻止默认行为
                e.preventDefault();
            };

只允许child弹出菜单

            child.oncontextmenu = function (e) {
            	//在child区域内点击
                //child阻止事件冒泡，parent和document都接收不到事件
                e.stopPropagation();
            };
            document.oncontextmenu = function (e) {
                //在child之外的区域点击，parent和document仍然可以接收到事件
                //阻止默认行为
                e.preventDefault();
            };

只允许parent之外的区域弹出菜单

            parent.oncontextmenu = function (e) {
            	//在parent区域内点击，触发此处理器，在parent区域外点击，不会触发此处理器
                //阻止默认行为
                e.preventDefault();
            };

只允许parent的非child区域弹出菜单

            child.oncontextmenu = function (e) {
                //阻止默认行为
                e.preventDefault();
            };
            parent.oncontextmenu = function (e) {
            	//在parent的非child区域点击，不会触发child的事件处理器
                //parent阻止事件冒泡，document不会再处理事件
                e.stopPropagation();
            };
            document.oncontextmenu = function (e) {
            	//在parent之外的区域点击
                //阻止默认行为
                e.preventDefault();
            };