首页 > 代码库 > jQuery实现鼠标点击Div区域外隐藏Div
jQuery实现鼠标点击Div区域外隐藏Div
冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(摘自网络)
1. 阻止事件冒泡, 并不阻止事件行为:event.stopPropagation();
$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});
});
2. 阻止事件行为,并阻止事件冒泡 :event.preventDefault();
$(function() {
$("#link").click(function(event) {
event.preventDefault();
});
});
3. 阻止事件冒泡, 也阻止事件行为:return false;
$(function() { $("#link").click(function(event) { return false; }); })
阻止事件冒泡:
$("#btn").click(function (event) {
$("#demo").fadeIn();
$(document).one("click", function () {//对document绑定一个影藏Div方法
$("#demo").hide();
});
event.stopPropagation();//点击Button阻止事件冒泡到document
});
$("#demo").click(function (event) {
event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document
});
例子:
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p> <div class="menu"> <a href="http://www.baidu.com">百度</a> </div> $(".a").on("click", function(e){ if($(".menu").is(":hidden")){ $(".menu").show(); }else{ $(".menu").hide(); } $(document).one("click", function(){ $(".menu").hide(); }); e.stopPropagation(); }); $(".menu").on("click", function(e){ e.stopPropagation(); });
jQuery实现鼠标点击Div区域外隐藏Div
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。