<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-事件对象[下]冒泡,默认行为
原文地址:http://www.cnblogs.com/gengxinnihaoma/p/7597994.html