JavaScript停止冒泡和阻止浏览器默认行为

来源：互联网发布：淘宝超级会员要买多少编辑：程序博客网时间：2024/05/16 09:19

停止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
一般来说使用下面一行代码就可以解决！

window.event? window.event.cancelBubble = true : e.stopPropagation();

举例

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head><body>    <div id='div' onclick='alert("div");'>        <ul onclick='alert("ul");'>            <li id='test'>test</li>        </ul>    </div>    <script type="text/javascript">        $('#test').click(function () {            alert('li');        });    </script></body></html>

这时候点击test会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。
然而在li标点点击事件的function中添加window.event? window.event.cancelBubble = true : e.stopPropagation();则只会触发alert( “li” );阻止目标元素的事件冒泡到父级元素。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="js/jquery-3.1.1.min.js"></script></head><body>    <div id='div' onclick='alert("div");'>        <ul onclick='alert("ul");'>            <li id='test'>test</li>        </ul>    <script type="text/javascript">        $('#test').click(function (e) {            window.event? window.event.cancelBubble = true : e.stopPropagation();            alert('li');        });    </script>    </body></html>

阻止默认行为
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使元素本身有默认行为，调用preventDefault也是不会起作用的。

如：以下代码

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="js/jquery-3.1.1.min.js"></script></head><body>    <a href='http://www.baidu.com' id="testA">百度</a></body></html>

点击百度时会跳转！如果将代码变为如下：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="js/jquery-3.1.1.min.js"></script></head><body>    <a href='http://www.baidu.com' id="testA">百度</a>    <script type="text/javascript">        var a = document.getElementById("testA");        $('a').click(function(e){            if(e.preventDefault){                e.preventDefault();            }else{                window.event.returnValue == false;            }        });    </script></body></html>

此时再点击百度也不会跳转！这就是阻止浏览器默认行为

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

下面这个使用原生js，只会阻止默认行为，不会停止冒泡

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script src="js/jquery-3.1.1.min.js"></script></head><body>    <div id='div' onclick='alert("div");'>        <ul onclick='alert("ul");'>            <li id='test'>test</li>            <a href='http://www.baidu.com' id="testA">百度</a>        </ul>    <script type="text/javascript">        var a = document.getElementById("testA");        a.onclick = function()        {            return false;        }    </script>    </body></html>

1 0