JQuery中阻止事件冒泡方式及其区别

原创 2010年02月27日 16:32:00

JQuery 提供了两种方式来阻止事件冒泡。

方式一:event.stopPropagation();

        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });

方式二:return false;

        $("#div1").mousedown(function(event){
            return false;
        });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

场景应用: Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

示例测试代码: 当文本输入框获取焦点后,在div1的mousedown事件中采用 event.stopPropagation(); 代码,我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时,鼠标单击红色区域光标仍然停留在文本输入框内。

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />

<title></title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $(document).ready(function(){
        $("#div1").mousedown(function(event){
            //event.stopPropagation();
            return false;
        });
        $("#div2").mousedown(function(event){
            alert("trigger mousedown event of rootDiv");
        });
    });
</script>
</head>
<body>
    <div id="rootDiv" style="position:relative;left:400px;top:200px;">
        <div>1.单击输入框,使输入框获取焦点:</div>
        <input id="input1" style="width:250px;" type="text"></input>
        <div id="div2">
            <div id="div1" style="width:200px;height:200px;background-color:red;"><br><br>2.然后再单击这里</div>
        </div>
    </div>
</body>
</html>

jquery中on动态绑定阻止冒泡事件异常

绪论:如果动态生成的元素用on来绑定事件,会根据selector不同,阻止冒泡的结果也不同。...
  • xuexizhe88
  • xuexizhe88
  • 2017年02月17日 17:01
  • 1506

jQuery阻止向上冒泡事件

jQuery阻止向上冒泡
  • fangfengzhen115
  • fangfengzhen115
  • 2015年05月11日 11:27
  • 1968

jquery阻止事件冒泡及解决办法 live

动态添加标签的live事件注:jquery版本1.8之后不在支持live事件 在实际项目中遇到的问题,动态添加的标签 live阻止冒泡失效,无论是用return false还是用e.stop...
  • qq_34041961
  • qq_34041961
  • 2017年09月13日 09:13
  • 431

jQuery阻止冒泡事件和默认事件

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 ...
  • Nightliar
  • Nightliar
  • 2017年12月27日 15:31
  • 107

jquery 事件冒泡的介绍以及如何阻止事件冒泡、浏览器默认行为

jquery 事件冒泡的介绍以及如何阻止事件冒泡、浏览器默认行为 http://www.jb51.net/article/32792.htm 在一个对象上触发某类事件(比如单击onclick事件)...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年07月27日 15:08
  • 932

阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法...
  • wxl1555
  • wxl1555
  • 2016年11月11日 15:06
  • 16896

js阻止事件冒泡的两种方法

一、冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。 方法一:event.stopPropagation( ); 例如:     段落文本...
  • shangazhe
  • shangazhe
  • 2017年01月18日 10:21
  • 6193

谷歌Chrome,火狐Fire fox、IE阻止事件冒泡的兼容方法 -- sanai

兼容谷歌、火狐、IE的阻止事件冒泡的兼容方法。
  • sanai_1992
  • sanai_1992
  • 2017年05月12日 18:04
  • 1673

vuejs-阻止事件冒泡与默认行为

阻止事件冒泡与默认行为
  • Levis_1993
  • Levis_1993
  • 2017年05月18日 18:40
  • 9544

JS阻止冒泡事件和默认事件(IE和其他浏览器兼容)

冒泡事件:比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素 默认事件:像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件 我们有时想要阻止这些事件需要注意的是IE...
  • liona_koukou
  • liona_koukou
  • 2016年11月18日 10:33
  • 1703
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中阻止事件冒泡方式及其区别
举报原因:
原因补充:

(最多只允许输入30个字)