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>

相关文章推荐

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

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

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

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

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

Jquery提供了两种方式来阻止事件冒泡 方式一:event.stopPropagation(); $("#div1").mousedown(function(e){         e.sto...

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

绪论:如果动态生成的元素用on来绑定事件,会根据selector不同,阻止冒泡的结果也不同。...

jquery取消事件冒泡的三种方法

1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind(   "submit",   function() {    ...
  • typ0520
  • typ0520
  • 2013年04月11日 00:56
  • 29875

jQuery阻止向上冒泡事件

jQuery阻止向上冒泡

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

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

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

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

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

抽空学习了下,javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享。到这里是不是可以理解addEventListener(type,handler,useCapture)这个A...

jQuery之防止冒泡事件

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。下面是html代码部分: "content"> 外层div元素 内层span元素 外层div元素 "msg">...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中阻止事件冒泡方式及其区别
举报原因:
原因补充:

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