点击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. hdu 1576 A/B 拓展欧几里得算法

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  2. bzoj 1305: [CQOI2009]dance 二分+網絡流判定

    1305: [CQOI2009]dance跳舞 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 1340  Solved: 581[Submit][Sta ...

  3. 跨终端Web之Hybrid App

    Native App(以下简称Native)和Mobile Web(以下简称Web)二者混合开发的产物被称为Hybrid App(以下简称Hybrid).Hybrid并不是什么新概念,最早可以追溯到S ...

  4. CPU再烂,俺也支持虚拟化呀,再附送64位WINDOWS的IIS上配置支持PHP的注意事项

    原来要对IIS进行降权,让他可以支持32位程式     cscript.exe %SYSTEMDRIVE%\inetpub\adminscripts\adsutil.vbs SET W3SVC/App ...

  5. java基础随笔-overload和override

    今天重温了一下方法重载和方法重写. 首先是方法重写(override)的几点要求: 1.必须继承父类或者实现某接口的方法. 2.方法名称和参数必须和父类(或者实现的接口方法)完全一致. 3.重写的修饰 ...

  6. 关于memory 和 cache

    这篇文章介绍了cache的相关知识,包括全相关.组相关.缓存与置换策略.WriteThrough和WriteBack策略.cache体系.CPUID和缓存一致性.介绍了两种缓存一致性的协议:snoop ...

  7. Host group 信息

  8. Linux学习笔记11——文件I/O之二

    一.文件共享 内核使用三种数据结构表示打开的文件,它们之间的关系决定了在文件共享方面一个进程对另一个进程可能产生的影响. 1.每个进程在进程表中都有一个记录项,记录项中包含有一张打开文件描述表 2.内 ...

  9. Linux学习笔记10——文件I/O之一

    UNIX系统中的大多数文件I/O只需要用到5个函数:open,read,write,lseek以及close 文件描述符 文件描述符是一个非负整数,所有打开的文件都通过文件描述符引用 文件描述符的变化 ...

  10. Unity5 的新旧延迟渲染Deferred Lighting Rendering Path

    unity5 的render path ,比4的区别就是使用的新的deferred rendering,之前的4的deferred rendering(其实是light prepass)也被保留了下来 ...