• 冬奥观察:奥林匹克在“云”间 2018-02-20
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-20
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-20
  • 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-18
  • 冬奥会短节目第四 金博洋:伤病令我更强大 2018-02-18
  • 天津市北辰区委书记冯卫华:强化政治担当 把主体责任落实落细 2018-02-17
  • 正月初一客流继续回落 全国铁路预计发送旅客389万人次 2018-02-17
  • 送别余光中:诗人虽远行,乡愁永流传 2018-02-17
  • 集团原董事长违纪被查 人员伤亡事故频发 湖北宜化:去年亏损额超过公司市值 2018-02-17
  • 图片故事:“六个人”的火车站 2018-02-16
  • 【马来西亚房产】雅诗阁之星十年包租可续租! ——凤凰网房产马来西亚 2018-02-16
  • 大量顺差在中国,多数利润归美国 2018-02-16
  • JQuery中阻止事件冒泡方式及其区别

    栏目: 编程语言 发布于: 2014-05-02 13:11:49

    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; 代码时,鼠标单击红色区域光标仍然停留在文本输入框内。

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://www.rocksun.cn/js/jquery.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>

    您可能感兴趣的文章

    • js屏蔽鼠标键盘事件(包括鼠标右键,方向键,退格键,F5刷新键等),兼容IE和firefox
    • smarty模板中使用php函数以及smarty模板中如何对一个变量使用多个函数
    • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
    • jQuery向动态生成的内容添加事件响应(jquery live方法简介)
    • php中在变量和函数前加static关键字之后的区别
    • jQuery–鼠标经过(hover)事件的延时处理
    • ThinkPHP中execute和query方法的区别
    • mysql中tinyint、smallint、int和bigint类型的用法区别
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:JQuery中阻止事件冒泡方式及其区别
    IT技术书籍推荐:
    PHP从入门到精通(第3版)
    PHP从入门到精通(第3版)
    明日科技 (作者)
    《PHP从入门到精通(第3版)》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分4篇25章,包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程控制语句、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、PHP与JavaScript交互、日期和时间、Cookie与Session、图形图像处理技术、文件系统、面向对象、PHP加密技术、MySQL数据库基础、phpMyAdmin图形化管理工具、PHP操作MySQL数据库、PDO数据库抽象层、ThinkPHP框架、Smarty模板技术、PHP与XML技术、PHP与Ajax技术、应用Smarty模板开发电子商务网站、应用ThinkPHP框架开发明日导航网等内容。书中所有知识都结合具体实例进行介绍,涉及的程序代码均附以详细的注释,可以使读者轻松领会PHP程序开发的精髓,快速提高开发技能。