点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”。
js代码如下:
$("#div").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$("#div").hide();
});
实现了点击其它地方隐藏div后遇到了另一个问题。我的div内部使用了bootstrap的tab组件,div的onclick事件阻止冒泡后,tab失效了。原因暂时不明确。
这个时候尝试换一种事件,用mouseDown而不是onclick,实现效果“tab组件正常使用,点击其它地方隐藏div”。 项目用到了sweet-alert组件,点击div内部某个地方,出现sweet-alert弹窗,这个弹窗也需要阻止冒泡,即点击弹窗不隐藏div。但sweet-alert源文件并没有设置是否冒泡的接口,也不知道弹窗在何时渲染完成好添加阻止冒泡的代码。查看源文件后发现在执行函数openModel时弹窗加载完成,分别在defaultParams和availableCustoms
添加stop_propagation属性,默认值设置为false,即默认冒泡,在openModel函数添加参数stop_propagation,在openModel函数体添加判断,代码如下
if(stop_propagation){
$('.sweet-alert').mousedown(function(e){
e.stopPropagation();
});
}
在使用sweet-alert的时候,就可以随意设置冒泡与不冒泡了。实现了点击sweet-alert不隐藏div。

点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡的更多相关文章

  1. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  2. 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

    如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...

  3. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

  4. 点击其他地方隐藏div

    document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...

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

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  6. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. Jquery手机点击其他地方隐藏控件问题

    因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...

  8. 点击其它地方关闭DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. js 冒泡事件 点击任意地方隐藏元素

    $(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...

随机推荐

  1. wordpress 如何从后台数据库修改theme(图文教程)

    我们在wordpress主题theme配置的时候,会从网站上下载比较流行的theme,使自己的blog看着很酷,也有不顺利的时候,你下载的theme有bug或者下载包出问题了,安装过后你的web页面不 ...

  2. JdbcTemplate 操作Oracle Blob

    1:增加操作 public int addTest(TestVo tv) { byte bz[] = tv.getBz().getBytes(); LobHandler lobHandler = ne ...

  3. mysql中TimeStamp和Date的转换

    mysql 查询时间戳(TIMESTAMP)转成常用可读时间格式 from_unixtime()是MySQL里的时间函数 date为需要处理的参数(该参数是Unix 时间戳),可以是字段名,也可以直接 ...

  4. QT 读写二进制 (数值)高位在前

    在人们的计数规则中,一般都认为高位在前,即往前的地位大,如123,我们认为是一百二十三, 但在计算机中数值是以二进制存储的,字节是最小的存储单位,如int(32位),占4个字节,每个字节有八位, 24 ...

  5. 《More Effective C++》 条款5 谨慎定义类型转换函数

    ---恢复内容开始--- C++编译器能够在两种数据类型之间进行隐式转换(implicit conversions),它继承了C语言的转换方法,例如允许把char隐式转换为int和从short隐式转换 ...

  6. 使用 Chef 管理 Azure 资源

     发布于 2014-07-08 作者 陈 忠岳 Chef 是一款开源的开发运营(DevOps)工具,用以应对 IT 基础设施方面的挑战.微软开放技术有限公司(简称"微软开放技术" ...

  7. android新建项目时 出现appcompat_v7工程错误和红色感叹号

    最近初学android,版本是22.6.0的话,每次创建一个项目就会出现一个appcompat_v7工程:然后我升级到最新的版本23.0.4之后,创建第一个项目,也会出现一个appcompat_v7工 ...

  8. A configuration error occurred during startup. Please verify the preference field with the prompt: Cannot connect to vm

    1.报错图 解决方法: Window->Preferences->MyEclipse Enterprice Workbench->Servers->Tomcat->选择你 ...

  9. HUD --- 3635

    Five hundred years later, the number of dragon balls will increase unexpectedly, so it's too difficu ...

  10. git bash【初级入门篇】

    最近公司打算使用git代替之前的svn版本控制工具,趁此机会打算好好学学git,这个号称当今世界最牛的分布式版本控制工具. 一.[git和svn的主要区别] 1.去中心化 svn以及微软的TFS均采用 ...