JQuery를 사용하여 이벤트 버블링 방지
- 高洛峰원래의
- 2016-12-03 09:08:23987검색
버블링 이벤트는 하위 노드를 클릭하는 것으로, 상위 노드와 상위 노드의 클릭 이벤트가 위쪽으로 트리거됩니다.
일반적인 개발 과정에서 div를 하나의 div로 래핑하는 상황이 발생합니다(이 div는 요소일 수 있음). 하지만 클릭하면 이벤트가 두 div에 모두 추가됩니다. 이 div의 이벤트는 div 내부에 있지만 외부 div의 이벤트도 실행되는 것을 원하지 않습니다. 이때 버블링을 방지하기 위해 사용해야 합니다.
평신도 입장에서 말하면, 집에서 TV를 시청하고, 자신의 작은 방에 숨어 있는데, 그 소리가 옆집 부모님 귀에 닿는 것을 원하지 않는 이때, 당신은. 이불 밑이나 벽에 가려질 수 있습니다. 방음 효과가 매우 좋습니다. 소리를 차단한다는 것은 기포를 방지하는 것으로 이해될 수 있습니다.
<style>
#content{
width: 140px;
border: 1px solid blue;
}
#msg{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
</style>
<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>
</body>결과 표시
해당 jQuery 코드는 다음과 같습니다.
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 为内层div绑定click事件
$("#msg").click(function(){
alert("我是小div");
});
// 为外层div元素绑定click事件
$("#content").click(function(){
alert("我是大div");
});
// 为body元素绑定click事件
$("body").click(function(){
alert("我是body");
});
});
</script>작은 div를 클릭하면, 큰 div는 div 및 본문에서 클릭 이벤트가 트리거됩니다. 큰 div를 클릭하면 본문의 클릭 이벤트가 발생합니다.
이런 버블링 이벤트를 방지하려면 어떻게 해야 할까요?
다음과 같이 수정하세요.
event.stopPropagation(); // 이벤트 버블링 방지
때때로 제출 버튼을 클릭하면 기본 이벤트가 발생하는 경우가 있습니다. 예를 들어, 다른 인터페이스로 점프합니다. 하지만 검증을 통과하지 못한 경우 점프해서는 안 됩니다. 이때 event.preventDefault(); //기본 동작(양식 제출)을 방지하도록 설정할 수 있습니다.
html 부분
<body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(event){
//获取元素的值，val() 方法返回或设置被选元素的值。
var username = $("#username").val();
//判断值是否为空
if(username==""){
//提示信息
//alert("文本框的值不能为空");
$("#msg").html("<p>文本框的值不能为空.</p>");
//阻止默认行为 ( 表单提交 )
event.preventDefault();
}
});
});
</script>//기본 동작 방지(양식 제출)
event.preventDefault()
기본 동작을 방지하는 또 다른 방법은 return false입니다. . 효과는 동일합니다.
코드는 다음과 같습니다.
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(event){
//获取元素的值，val() 方法返回或设置被选元素的值。
var username = $("#username").val();
//判断值是否为空
if(username==""){
//提示信息
//alert("文本框的值不能为空");
$("#msg").html("<p>文本框的值不能为空.</p>");
//阻止默认行为 ( 表单提交 )
//event.preventDefault();
return false;
}
});
});
</script>마찬가지로 위의 버블링 이벤트도 false를 반환하여 처리할 수 있습니다.
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
// 为内层div绑定click事件
$("#msg").click(function(event){
alert("我是小div");
//event.stopPropagation(); // 阻止事件冒泡
return false;
});
// 为外层div元素绑定click事件
$("#content").click(function(event){
alert("我是大div");
//event.stopPropagation(); // 阻止事件冒泡
return false;
});
// 为body元素绑定click事件
$("body").click(function(event){
alert("我是body");
//event.stopPropagation(); // 阻止事件冒泡
return false;
});
});