事件冒泡:事件开始是由具体的元素接收,然后逐级向上传播到不具体的节点。
添加以下代码
<div class="content"> <a href="http://www.baidu.com" target="_blank">hhhh</a> </div>
添加CSS
.content{height: 200px;width: 600px;margin: 0 auto;background-color: red} .content a{display: block;height: 50%;width: 50%;background-color: green;}
1、event.preventDefault()
$(".content a").click(function(event) { event.preventDefault(); }); $(".content").click(function() { alert("1"); });
取消事件默认事件(弹出提示框,不会有跳转)
2、event.Propagation()
$(".content a").click(function(event) { event.stopPropagation(); }); $(".content").click(function() { alert("1"); });阻止事件的进一步冒泡或者捕获(会跳转链接,不会跳出提示框)
3、event.ImmediatePropagation()
阻止事件的进一步冒泡或者捕获,同时阻止任何事件处理程序被调用。
4、return false
$(".content a").click(function(event) { return false; });
等同于:
$(".content a").click(function(event) { event.stopPropagation(); event.preventDefault(); });阻止事件冒泡的同时也会阻止默认事件
本人正在学习和摸索中,如有错误,欢迎指正!