js点击其他地方隐藏

刺骨的言语ヽ痛彻心扉 2023-07-10 15:34 11阅读 0赞

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

当需要阻止默认行为时，可以使用[·][http_caibaojian.com_javascript-stoppropagation-preventdefault.html]

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

[http_caibaojian.com_javascript-stoppropagation-preventdefault.html]: http://caibaojian.com/javascript-stoppropagation-preventdefault.html