阻止事件冒泡阻止浏览器的默认行为

原创

徐同保的博客 2022-06-30 17:09:29 博主文章分类：web前端 ©著作权

文章标签 阻止事件冒泡阻止浏览器的默认行为 html jquery 事件冒泡 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>阻止事件冒泡 阻止浏览器的默认行为</title>    
    <style type="text/css">
    </style>     
</head>      
<body>
    <button id="btn1">按钮1</button>
    <input type="text" id="m-text">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            function stopBubble(e) { 
                //如果提供了事件对象，则这是一个非IE浏览器 
                if (e && e.stopPropagation) {
                    //因此它支持W3C的stopPropagation()方法 
                    e.stopPropagation();        
                } else {
                    //否则，我们需要使用IE的方式来取消事件冒泡 
                    window.event.cancelBubble = true; 
                }
            }           
            $('body').on('click', function() {
                console.log('body');
            });
            $('#btn1').on('click', function(e) {
                console.log('按钮1');
                stopBubble(e); //阻止冒泡
            });

            //阻止浏览器的默认行为 
            function stopDefault(e) { 
                //阻止默认浏览器动作(W3C) 
                if (e && e.preventDefault) {
                    e.preventDefault(); 
                } else { //IE中阻止函数器默认动作的方式 
                    window.event.returnValue = false; 
                }
                return false; 
            }           
            $('#m-text').on('keydown', function(e) {
                console.log(String.fromCharCode(e.keyCode));
                stopDefault(e);
            });
        });
    </script>
</body>      
</html>