这里return false可以结束事件不是很理解

这里return false可以结束事件不是很理解

// ui-search定义

$.fn.UiSearch=function(){

var ui=$(this);

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

//这里加return的办法避免了事件的冒泡

});

$('body').on('click',function(){

$('.ui-search-select-list').hide();

});

}

// 页面脚本逻辑

$(function(){

$('.ui-search').UiSearch();

})

我对事件的了解是,首先在JS从上到下执行的时候绑定事件

$('div').on('click,function(){

alert('2');

}

alert('1');

这段代码的执行顺序是js从上到下执行,先找到div元素,然后绑定了一个click事件,然后执行到alert(‘1’),弹出框,在之后等待触发click事件,执行click事件。这个理解有错误吗

案例中加的return flase结束的应该是click事件,外层的UiSearch函数不会被结束,或者说Uisearch在执行完函数内部的绑定事件等语句完成时候,已经结束。那么这里的return false怎么会阻止了冒泡呢

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,这个跟body自身绑定的事件($("body").on('click',function{}))没有关系,首先,需要了解什么是事件冒泡,事件冒泡指的是事件开始时由最具体的元素,然后逐级向上传播到较为不具体的结点(body),比如这里的ui-search-selected绑定的点击事件会一级一级向上传播,最终作用在body元素上,而实际上我们并不需要ui-search-selected绑定的点击事件传播作用到body元素上,我们只需要ui-search-selected绑定的元素作用在ui-search-selected元素上,那么,就需要设置return false;阻止事件冒泡,也就是阻止事件向上逐一传播。而return false;会同时阻止事件冒泡,也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault(),如果同学对event.stopPropagation()和event.preventDefault()不理解,可以复习一下《js事件》https://class.imooc.com/course/777。

祝学习愉快!


  • 王文辉 提问者 #1
    关于event.stopPropagation()和event.preventDefault()我理解,但用return false就等同于这两个不是很懂。 关于冒泡,我的理解和老师一样的,当点击了ui-search-selected元素时,其点击事件触发,执行完成之后会依次触发其父元素的点击事件,一直到html结束,一般的点击事件之所以没有表现出冒泡,是因为父元素没有定义点击事件,定义才会触发,其他的事件同理。 还有就是在事件处理函数内部return false相当于event.stopPropogation()和event.preventDefault是在jq中,还是js中都是这样呢
    2020-05-06 12:19:03
  • 卡布琦诺 回复 提问者 王文辉 #2
    这是因为event.stopPropagation()方法阻止事件的冒泡方法,不让事件向上冒泡,但是默认事件任然会执行,当你使用这个方法的时候,如果点击一个链接,这个链接仍然会被打开,event.preventDefault()方法是阻止默认事件的方法,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;return false会同事阻止事件冒泡也会阻止默认事件;写上此代码,链接不会被打开,事件也不会传递到上一层的父元素;因此,可以理解为使用return false就等于同时调用了event.stopPropagation()和event.preventDefault(),在jq和js中都是这个道理。
    2020-05-06 13:36:10
提问者 王文辉 2020-05-05 20:21:32

我不懂的其实在于为什么那个return false可以阻止冒泡

http://img1.sycdn.imooc.com//climg/5eb15a47095fe59506960570.jpg



我感觉事件内部使用event.stopPropagation()更简单,为什么不用啊

卡布琦诺 2020-05-05 18:47:14

同学你好,首先,理解是正确的;另外,因为点击ui-search-selected元素,子菜单会显示。但是事件会冒泡,在body上也绑定了点击事件,将子菜单隐藏了,所以如果不阻止冒泡的话,子菜单显示然后隐藏,最终效果就是隐藏的,return false 只在当前函数有效,不会影响其他外部函数的执行。

祝学习愉快!

  • 提问者 王文辉 #1
    老师没办法回复图片,我再其他的楼层回复了,麻烦看下
    2020-05-05 20:21:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师