js弹出层点层以外任意地隐藏，这个问题很早之前解决过，自己比较偷懒就没记录下来，最近做一个效果再次碰到，网上搜到了相关方法，现在把方法整理一下
关键在 e.stopPropagation()方法，该方法是在Event对象中，说明是停止某事件的传播。
相关说明：http://www.w3school.com.cn/jsref/event_stoppropagation.asp
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<style>
div{
position: absolute;
width: 300px;
height: 150px;
border: 1px solid #ddd;
background: #ddd;
display: none;
z-index: 99999;
}
span{
position: absolute;
left: 35%;
top: 25%;
}
</style>
<script>
$(function (){
$('#area').click(function(){
var offset = $(this).offset();
$('div').css({top:offset.top,left:offset.left});
$('div').show();
$('div').mousedown(function (e){
e.stopPropagation();
});
$(document).mousedown(function (){
$('div').hide();
});
});
});
</script>
</head>
<body>
<span>
地区:<input id="area" type="text"></span>
<div >
这是一个层
</div>
</body>
</html>
相关推荐
在前端开发中，JavaScript弹出层（也称为模态窗口或对话框）是不可或缺的交互元素，它们用于显示额外信息、获取用户输入或执行特定操作。"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在...
Js弹出层库则是专门为此目的设计的JavaScript库，简化了弹出层的创建和管理过程。在这个场景中，我们关注的是名为"Dialog"的压缩包文件，很可能包含了一个对话框实现的库或者相关的代码示例。 弹出层通常分为几种...
在"js弹出div获取弹出层中文本值"这个场景中，我们将讨论如何利用JavaScript实现这一功能，并确保它在主流浏览器如IE6+、Firefox（ff）等上兼容。 首先，我们需要创建一个可隐藏的div元素作为弹出层，然后在需要的...
类似地，我们也可以监听`mouseover`和`mouseout`事件来在鼠标悬停或离开元素时显示或隐藏弹出层。例如： ```javascript const elementToHover = document.getElementById('hoverElement'); const hoverPopup = ...
本资源提供的"JS弹出层，js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性包括选择器、DOM...
在网页开发中，JavaScript（JS）常常用于实现各种交互效果，其中之一就是弹出层功能。弹出层在用户界面上创建了一个临时突出显示的区域，用于显示额外的信息、提示、表单或者任何需要用户注意的内容，而不会中断主...
在提供的压缩包“弹出层集合”中，可能包含了各种不同的弹出层实现方式，如纯JavaScript实现、jQuery插件、以及基于其他前端框架（如Bootstrap）的弹出层组件。通过学习和研究这些示例，你可以了解到更多的细节和...
在这个"可自定义js弹出层动画特效.zip"压缩包中，我们找到了一个JavaScript弹出层插件，它专门设计用来增强用户体验，提供多样化的弹出层显示方式。 首先，让我们了解一下弹出层（Popup Layer）的概念。弹出层是在...
根据提供的文档信息，本文将详细解析“js弹出层效果”的实现原理、代码结构以及应用场景。此案例展示了如何创建一个兼容IE6、IE8、Firefox（FF）和Chrome等浏览器的JavaScript弹出层。 ### 一、弹出层概述 在网页...
1. 显示弹出层：使用JavaScript控制弹出层的显示与隐藏。可以添加事件监听器，例如点击按钮时显示弹出层。 ```javascript document.getElementById('open-popup-button').addEventListener('click', function() { ...
在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中，我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果，特别是在页面顶部浮动的设计。 首先，让我们了解什么是弹出层。弹出层是一种网页设计技术，它...
"js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口，并确保它在各种浏览器（如Chrome、Firefox、Safari、Edge和IE等）上具有良好的兼容性。下面我们将深入探讨这一技术。 首先，...
本资源名为“国外超强JS弹出层”，它提供了一种高效、灵活的方法来实现弹出层效果，适用于展示图片和文字信息，提升用户体验。 弹出层通常用于在用户与页面交互时显示额外信息，如提示、警告、详细内容或扩展功能。...
在JavaScript（JS）中，实现弹出层同时打开新页面的功能通常涉及到DOM操作、事件处理以及浏览器窗口的管理。下面将详细讲解这个知识点。 首先，理解"弹出层"（通常指的是模态对话框或者浮动窗口）在网页中的实现...
本文将深入探讨多种JavaScript实现弹出层的方式，帮助你更好地理解和运用这些技术。 1. **基本Alert对话框** JavaScript内置的`alert()`函数是最基础的弹出层形式，它会显示一个包含消息的单行文本框，并有一个...
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
在JavaScript中，实现弹出层表单通常涉及到以下几个关键知识点： 1. **DOM操作**：首先，你需要能够动态创建和操作HTML元素。这包括创建`<form>`标签，添加输入字段（如`<input>`、`<textarea>`），以及设置表单的...
标题"Js弹出层（支持拖拽，多个弹窗自动切换层级）"提及的核心知识点是JavaScript中的弹出层实现，特别是它包含的两个关键特性：拖拽功能和多层弹窗之间的层级自动切换。这意味着我们要探讨的是如何在JavaScript中...
JavaScript用于控制弹出层的显示、隐藏以及与用户的交互，而CSS则负责样式设定，确保弹出层的美观和用户体验。下面我们将深入探讨这两个方面： 1. **JavaScript 弹出层实现**： - **显示和隐藏**：通常使用`...