博客

js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

  • Post author:
  • Post category:其他


问题：js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框？

  • 方案一：这个问题通常的办法是使用阻止事件冒泡来实现，代码如下（省略css）：

    <body>
	<button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button>
	<div id="alertBox" onclick="stopBubble()"></div>
</body>
<script>
	function alertBoxFn(e) {
		alertBox.style.display = "block";
	}
	function stopBubble(e){
		var e=e||window.event;
		e.stopPropagation()
	}
	document.body.addEventListener('click', function() {
		alertBox.style.display = 'none'
	})
</script>

但这有一个弊端，就是如果页面上需要有多个按钮分别控制多个弹框，需求是点击按钮1时显示弹框1，点击按钮2时显示弹框2，同时隐藏弹框1。但结果却是点击按钮2时，按钮1并不会隐藏。这是因为按钮2阻止了点击事件的冒泡，导致body元素的点击事件并没有被触发。于是，这里我们不能再使用阻止事件冒泡的方法了。

  • 方案二：声明一个变量用来判断鼠标是否点击的是按钮或弹框。代码如下（省略c


版权声明：本文为yimawujiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。