jquery-事件对象[下]冒泡，默认行为
<form action="123.html">
<div style="width: 200px;height: 200px;background:#ccc;">
<input type="submit" value="提交">
<a href="http://www.baidu.com" target="_blank">baidu</a>
</div>
</form>
<script>
$(function () {
取消冒泡和默认行为
$('input').click(function (e) {
e.stopPropagation(); //禁止冒泡
alert('input');
});
$('div').click(function (e) {
e.stopPropagation(); //禁止冒泡
alert('div');
});
$(document).click(function () {
alert('document');
});
------------------------------------------------------------------------
网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
$('a').click(function (e) {
e.preventDefault(); //阻止默认行为
alert('a');
});
$('input').click(function (e) {
e.preventDefault(); //阻止默认行为，禁止表单提交
alert('表单提交');
});
第二种方法，建议用第二种方法
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为，禁止表单提交
});
------------------------------------------------------------------------
阻止冒泡又禁止了默认行为
$('a').click(function (e) {
e.preventDefault();
e.stopPropagation();
alert('a');
});
第二种方法 简写方案
$('a').click(function (e) {
alert('a');
return false;
});
$('div').click(function (e) {
alert('div');
});
$(document).click(function () {
alert('document');
});
------------------------------------------------------------------------
isDefaultPrevented和isPropagationStopped的用法
$('a').click(function (e) {
e.preventDefault();
e.stopPropagation();
alert(e.isDefaultPrevented()); //true
alert(e.isPropagationStopped()); //true
});
------------------------------------------------------------------------
写在两个click也可以
$('a').click(function (e) {
e.preventDefault();
e.stopPropagation();
});
$('a').click(function (e) {
alert(e.isDefaultPrevented()); //true
alert(e.isPropagationStopped()); //true
});
------------------------------------------------------------------------
$('a').click(function (e) {
e.stopImmediatePropagation(); //阻止了冒泡并且取消了后续的事件
alert(e.isImmediatePropagationStopped()); //true
alert('a1');
});
$('a').click(function (e) {
alert('a2');
});
$('div').click(function (e) {
alert('div');
});
$(document).click(function () {
alert('document');
});
})
</script>
