事件冒泡
事件冒泡指的是事件开始时由最具体的元素,然后逐级向上传播到较为不具体的结点(body)就需要设置return false;阻止事件冒泡,也就是阻止事件向上逐一传播。而return false;
会同时阻止事件冒泡,也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()
和event.preventDefault()
,
event.stopPropagation()
方法阻止事件的冒泡方法,不让事件向上冒泡,但是默认事件任然会执行,当你使用这个方法的时候,如果点击一个链接,这个链接仍然会被打开,
event.preventDefault()
方法是阻止默认事件的方法,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;return false会同事阻止事件冒泡也会阻止默认事件;写上此代码,链接不会被打开,事件也不会传递到上一层的父元素;因此,可以理解为使用return false就等于同时调用了event.stopPropagation()和event.preventDefault(),在jq和js中都是这个道理。
$.fn.UiSearch= function () {
var ui = $(this);
//设置第二个参数ui $(this),就是从$(this)处开始进行搜索要获取的元素,这样就是在特定环境中进行搜索,可以少遍历。
$(".ui-search-selected",ui).on("click",function () {
$(".ui-search-select-list").show();
return false//阻止事件冒泡
//如果此处不加return false 当在body添加点击事件的时候,
//当前点击之后会冒泡到body上,
//使得body也会触发点击事件,导致下拉列表无法显示出来;
})
$(".ui-search-select-list a",ui).on("click",function () {
$(".ui-search-selected").text($(this).text());
$(".ui-search-select-list").hide();
return false;
})
$("body").on("click",function () {
$(".ui-search-select-list").hide();
})
}
}