首页 > 建站教程 > JS、jQ、TS >  JavaScript阻止事件冒泡的兼容写法:stopPropagation和cancelBubble正文

JavaScript阻止事件冒泡的兼容写法:stopPropagation和cancelBubble

        事件冒泡,顾名思义,就是子元素的事件,会触发到祖辈元素,这样有时候会导致一个问题,举个例子,点击按钮,菜单显示,点击body空白区域,菜单隐藏。那么,由于按钮在body里面,点击按钮的时候,会将自己的事件和body的事件都执行了,这样,无论如何,菜单也不会出来。所以,点击按钮的时候,要阻止它往上冒泡,这就是阻止事件冒泡的由来。
        阻止事件冒泡的写法,IE和火狐谷歌不一样(IE9之后,测试过,可以和IE和谷歌一致了),IE是 event.cancelBubble,而火狐和谷歌是stopPropagation,下面这段代码是兼容性的写法:


提示:您可以先修改部分代码再运行