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阻止事件冒泡及解决办法 live

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

jQuery事件---阻止冒泡和默认行为

冒泡如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。例如: 如果document、d...
  • twilight_karl
  • twilight_karl
  • 2017-06-16 16:50:06
  • 908

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

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

JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获,以及DOM事件流。现在我们来看下,JQuery框架中的事件冒泡问题,以及如何阻止事件的传播行为。   1、JQuery中的事件...
  • aitangyong
  • aitangyong
  • 2015-01-29 14:32:52
  • 7625

jQuery 中的事件冒泡和阻止默认行为

jQuery 中的事件冒泡和阻止默认行为 参考资料: 《锋利的jQuery》    作者:单东林 张晓菲 魏然    出版社: 人民邮电出版社 1、事件冒泡 ...
  • aimartt
  • aimartt
  • 2012-08-13 15:21:24
  • 24702

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

Jquery提供了两种方式来阻止事件冒泡 方式一:event.stopPropagation(); $("#div1").mousedown(function(e){         e.sto...
  • fanlulu2015
  • fanlulu2015
  • 2016-01-06 13:17:24
  • 1930

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件与动画 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bin...
  • u014785563
  • u014785563
  • 2016-12-06 11:34:45
  • 2922

jQuery阻止向上冒泡事件

jQuery阻止向上冒泡
  • fangfengzhen115
  • fangfengzhen115
  • 2015-05-11 11:27:04
  • 2259

jq事件冒泡

事件冒泡:当一个事件发生时,该事件总共有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。 当事件发生时,这个事件就要开始传播,从而能够达到处理这个事件的代码中,(例如我们...
  • yangyixue123
  • yangyixue123
  • 2017-07-19 09:41:00
  • 310

JQuery事件冒泡机制与解决

一、什么是事件冒泡?        当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。 当事件发生后,这个事件就要开始传播。为什么要传播呢?...
  • Inuyasha1121
  • Inuyasha1121
  • 2015-05-20 14:00:28
  • 1709
收藏助手
不良信息举报
您举报文章:JQuery中阻止事件冒泡方式及其区别
举报原因:
原因补充:

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