这里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;
});
正在回答
同学你好,这个跟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积分~
来为老师/同学的回答评分吧
0 星