js点击其他地方隐藏

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; 
}


 

发布了270 篇原创文章 · 获赞 102 · 访问量 50万+

猜你喜欢

转载自blog.csdn.net/hahahhahahahha123456/article/details/104632223