js点击其他地方隐藏:
<div class="container">
<button id="clickMe">click me</button>
<div class="showModal"></div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$(document).click(function() {
console.log($(this));
$('.showModal').css('display', 'none');
});
$('.showModal').click(function(e) {
// 禁止冒泡到document负极
if(e && e.stopPropagation()) {
e.stopPropagation();
} else {
e.cancelBubble = false;
}
});
$('#clickMe').click(function(e) {
e.stopPropagation(); // 禁止冒泡
if($('.showModal').css('display') == 'none') {
$('.showModal').css('display', 'block');
};
});
});
</script>
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
总结使用方法
当需要停止冒泡行为时,可以使用
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
当需要阻止默认行为时,可以使用·
//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}