js 点击目标div以外的区域隐藏div

2024-09-02

js实现点击div以外区域，隐藏div区域

<body style="text-align:center;"> <input type="text" style="width:200px;height:30px;background:pink;margin-top:100px auto 0;"> <div style="width:300px;height:300px;background:red;margin:0 auto;display:none

jquery点击非div区域隐藏div

点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

JQ 点击指定文本框显示div。点击其他区域隐藏DIV

<input id="username" type="text" style="width:90%;margin-top: 40px;" placeholder="請輸入車場名稱或車場間稱" class="text_name" name="username"/> <div class="text_div_all" style="displa

Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div,然后将鼠标再次移动到id=list的div上的时候,list的div也不会隐藏) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherit

Js-Html 前端系列--点击非Div区域隐藏Div

最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择,但是要点击滚动条的时候会隐藏掉,也就是点击不了滚动条. 思路:写一个Document级别的事件,监听MouseDown事件,判断点击区域进行判断是否要隐藏这个下拉Div. JS版实现: $(document).bind('mousedown',function(event){ var $targ

JS中点击事件冒泡阻止

JS中点击事件冒泡阻止解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是并不希望触发out的点击事件,只希望触发in层的点击事件,所以要阻止冒泡事件. 解决方法: e.preventDefault() 案例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l

vue（js）点击目标div以外区域将目标div隐藏

今天开发新项目的时候,有个需求,点击一个div 展示出个弹出窗弹出窗标题的颜色要跟点击的div图标颜色一致, 所以这就需要我遍历一下多个数据, 然后需要点击弹出div的外部其他区域,隐藏这个div.所以有了以下操作! 这个点击事件@click.stop="isPop(item.event)" 加上.stop 起阻止冒泡的效果,这里很重要,具体原因就暂时不解释了 .做的时候就会理解了: 目标div 是被 item.popShow 控制的,我给出我数组的格式 fiveList: [

【JS】点击目标外事件与IFRAM自适应高度

一.点击目标外事件 $(document).mouseup(function(e){ var _con = $('.dropdown-multiSelect-list'); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 _con.hide();// 功能代码 } }); 二.IFRAME自适应高度兼容IE6/IE7/IE8/Firefox/Opera/Chrome/Safari

怎么点击div之外的区域就隐藏这个div啊找了很久，都没有很好解决

方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body> <span onClick="with(document.getElementById(

js的事件冒泡和点击其他区域隐藏弹出层

一.前言在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: 弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章: 弹出层的设计一定要好看,按钮要符合项目的主色调: 弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应: 点击其他区域隐藏弹出层... 二.正文今天,主要说说点击其他区域隐藏弹出层.笔者被这个

点击div区域以外部分，div区域隐藏

核心思想: 监听body的click事件,事件触发的时候判断是否发生在弹出的div上,如果不在,关闭弹层 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"

js点击弹出div层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a> <div id=&

jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

<div class="Content_top"> <div class="Reserve"> <h3><span class="current">散租自驾</span><span>商务代驾</span><span> </span><span> </span><span> </span><

JS 实现点击页面任意位置隐藏div、span

通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存显示不隐藏.可用于仿下拉框及下拉菜单的实现. var nowshowdiv=""; function showhidden(div,nohidden){ if(div!=""){ if(document.getElementById(div).style.display

js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropagation 方法的使用,该方法将停止事件的传播,阻止它被分派到其他 Document 节点. function stopFunc(e) { e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; };//获取元素的

js点击页面其他地方如何隐藏div元素菜单

web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简单有效的方法仅供参考: document.onclick = function(e) { $("div").hide(); } $('button').on("click", function(e) { if($("#div").css("

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)

原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲言少叙,先看看具体的效果: 聚类效果点击显示信息显示单个聚类点下面说说具体的实现思路. 1.数据组织在进行数据组织的时候,因为是要按照区域范围的,所以必须得包含区域范围的信息,在本示例中,我用的数据依然是全国2000多个区县点的数据,并添加了省市代码,数据如下: 2.聚类思路根据数据中“p

由点击页面其它地方隐藏div所想到的jQuery的delegate

对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件冒泡, 事件冒泡 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素 Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反 DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发

js点击更多显示更多内容效果

我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种这个pagesizie有一个默认值10.可以不写如 <ul class="showMoreNChildren" pagesize="5"> <li>a</li> <li>b</li> <li>c&

js 点击目标div以外的区域隐藏div

热门专题