html中怎么样阻止事件冒泡,浅谈jQuery 中的事件冒泡和阻止默认行为

1、事件冒泡

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

$(function() {

//为 元素绑定 click 事件

$("span").click(function() {

$("#msg").html($("#msg").html() + "

内层span元素被单击

");

});

//为 Id 为 content 的

元素绑定 click 事件

$("#content").click(function() {

$("#msg").html($("#msg").html() + "

外层div元素被单击

");

});

//为

元素绑定 click 事件

$("body").click(function() {

$("#msg").html($("#msg").html() + "

body元素被单击

");

});

});

#content {

background: #b17af5;

}

外层div元素

内层span元素

外层div元素

当点击内部 元素时，会触发自身及外层

和 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。

修改 元素的 click 事件函数：

//为 元素绑定 click 事件

$("span").click(function(event) {//为方法添加一个事件对象参数

$("#msg").html($("#msg").html() + "

内层span元素被单击

");

event.stopPropagation();//阻止 的 click 事件冒泡

});

此时点击内部 元素时，只会触发自身的 click 事件，不会再向上冒泡。

2、阻止默认行为

有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，jQuery 提供了 preventDefault() 方法来实现。

当用户未填写用户名时，阻止表单提交：

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

$(function() {

$(":submit").click(function(event) { //为方法添加一个事件对象参数

//当未输入用户名时，提示并阻止提交

if ($(":text").val() == "") {

$("#msg").text("用户名不能为空");

event.preventDefault();//阻止提交按钮的默认行为(提交表单)

}

});

});

用户名

如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。

如：

$(":submit").click(function(event) { //为方法添加一个事件对象参数

//当未输入用户名时，提示并阻止提交

if ($(":text").val() == "") {

$("#msg").text("用户名不能为空");

return false;//阻止提交按钮的默认行为(提交表单)和事件冒泡

}

});$("span").click(function(event) {//为方法添加一个事件对象参数

$("#msg").html($("#msg").html() + "

内层span元素被单击

");

return false;//阻止 的 click 事件冒泡和默认行为(此元素没有默认行为)

});

以上这篇浅谈jQuery 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。