zoukankan      html  css  js  c++  java
  • 转:什么时候用阻止事件冒泡

    例如:document上有A事件,div有B事件,div里面的span有C事件,如果不给span和div加阻止事件冒泡的话,点击span时 就会触发到div的B事件、document的A事件,当点击span时不想触发div和document的事件就要加上阻止事件冒泡,div也是一样的 道理。

    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="250px;" type="text"></input>
            <div id="div2">
                <div id="div1" style="200px;height:200px;"><br>< br>2.然后再单击这里</div>
            </div>
        </div>
    </body>
    </html>

  • 相关阅读:
    利用 Remoting 实现异步队列机制
    JsonHelper
    吐血推荐"泛绿色编程工具": EditPlus 已于 20100714 升级到 v3.12(602)
    以 Console 方式运行、调试、编译 .Net 编写的 Windows 服务
    CompressHelper
    支持掩码输入的 .Net 2.0 Console 可用于使用掩码回显 password 的字符
    20080411 正式版 Microsoft Visual Studio International Pack 1.0 处理汉字、拼音、笔画转换
    CryptoHelper
    C++之String的find方法,查找一个字符串在另一个字符串的什么位置;leveldb字符串转数字解析办法
    Linux线程之线程池、高并发、线程数 C/C++ pthread 函数库
  • 原文地址:https://www.cnblogs.com/Better-Me/p/4236548.html
Copyright © 2011-2022 走看看