带你学习JQuery：事件冒泡和阻止默认行为

首先说什么是冒泡呢，简单的意思就是，你本来想只触发一个时间，但是实际上却出发了N个事件。

举例来说，有一个元素，如Span，你绑定了一个Click函数，你又为Div绑定了一个Click函数，而这个Span就在Div中，当你点击

Span时，同时就会触发Span和Div的Click函数。这就是冒泡。

那么怎么阻止冒泡行为呢

$('span').bind("click",function(event){
  var txt = $('#show).html() + "<p>内层span元素被点击.<p/>";
  $('#show').html(txt);
  event.stopPropagation();    // 阻止事件冒泡
});

可见很简单，就是在绑定的函数结尾加上evert.stopPropagation()翻译成中文就是阻止传播、泛滥

阻止默认行为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val(); //获取元素的值
         if(username==""){     //判断值是否为空
       $("#show").html("<p>文本框的值不能为空.</p>"); //提示信息
       event.preventDefault(); //阻止默认行为 ( 表单提交 )
   }
   })
})
</script>
</head>
<body>
<form action="test1.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

可见event.preventDefaule()方法确实阻止了默认行为即提交表单，但是如果有冒泡事件，enent.preventDeafult()方法是不够的还要调用

event.stopPropagation()方法，简单的替代方式就是return false；两个都可以阻止掉。也就是上面的所有 event.stopPropagation(); 和

event.stopPropagation()方法都可以用return false取代。

转载于:https://www.cnblogs.com/newsouls/archive/2012/03/01/2376026.html

带你学习JQuery：事件冒泡和阻止默认行为相关推荐

jQuery 中的事件冒泡和阻止默认行为
jQuery 中的事件冒泡和阻止默认行为参考资料: <锋利的jQuery> 作者:单东林张晓菲魏然出版社: 人民邮电出版社 1.事件冒泡 [javascript] vi ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
jquery阻止默认行为_Jquery 事件冒泡以及阻止默认事件
1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:xx $("#xx").click(function(e) ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...
Js阻止事件冒泡与阻止默认事件
1.event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行.不让事件向document上蔓延,但是默认 ...
阻止事件冒泡和阻止默认事件的方法
1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...

带你学习JQuery：事件冒泡和阻止默认行为

带你学习JQuery：事件冒泡和阻止默认行为相关推荐

最新文章

热门文章