jquery-事件对象[下]冒泡，默认行为
Posted 耿鑫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于jquery-事件对象[下]冒泡，默认行为的主要内容，如果未能解决你的问题，请参考以下文章