• 女人更年期后,要不要避孕?如何避? 2018-05-25
  • 债市风险有多大?华商系债基今年跌幅已超20% 2018-05-25
  • 供电公司采取小额诉讼手段维权 3个月不交电费将收到律师函 2018-05-25
  • 智能公交让全民体验智慧出行 2018-05-25
  • 杭州男子钓起16斤重“猛兽”,专家一看:可别随意丢弃! 2018-05-25
  • 望川十年,看见中国社会的成长 2018-05-25
  • 哈尔滨市“拔钉子”严查露天烧烤 21家冒烟摊位将被依法处罚 2018-05-24
  • 新濠天地娱乐城官网 2018-05-24
  • “澳门368足球博彩公司”足球比分及时直播李国英主持召开省深化医药卫生体制改革领导小组会议 2018-05-23
  • 马来大选92岁前总理改写政治版图 60年来政党首轮替 2018-05-23
  • 科技创新技能挑战赛聚焦冬奥主题 2018-05-23
  • 泰国试管婴儿bnh医院技术怎么样,是最好的吗?—海口论坛 2018-05-23
  • 置业指南:买高层要注意这些问题 2018-05-22
  • い羛琩矪堵旧笴眏い瓣笴潦ㄆン 2018-05-22
  • 有力有序有效防范化解煤电产能过剩风险 2018-05-22
  • 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程序开发的精髓,快速提高开发技能。