点击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. Redis3在CENTOS6上的安装配置

    重温一下,这次找了个简单的安装. 测试过程很顺利哟. 参考URL: http://www.linuxidc.com/Linux/2015-07/119567.htm 一.介绍 redis在做数据库缓存 ...

  2. 调优UWSGI,后台启动,热更改PY,杜绝502

    记得加启动参数: --daemonize /var/log/uwsgi.log --post-buffering 32768 --buffer-size 32768 reload.set #!/bin ...

  3. 玩SSH,SFTP

    更改SFTP的本地路径,记得前面要加l哟,应该表示local的意思.如lls,lcd. 证书SSH更安全.就是多服务布置有些烦琐~~

  4. Keil C51软件的使用

    进入 Keil C51 后,屏幕如下图所示.几秒钟后出现编辑界 启动Keil C51时的屏幕 进入Keil C51后的编辑界面 简单程序的调试:学习程序设计语言.学习某种程序软件,最好的方法是直接操作 ...

  5. SQLserver 数据库

    1.数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Da ...

  6. Spring MVC 解读——@Autowired(转)

    转自:http://my.oschina.net/HeliosFly/blog/203902 Spring MVC 解读——@Autowired 一.@Autowired 作为一个Spring开发者对 ...

  7. DragSortListView学习总结

    Drag-sort-listview 是一个支持拖拽排序和左右滑动删除功能的自定义ListView,重写了 TouchInterceptor类来提供更加优美的拖拽动画效果. DSLV主要特性: 完美的 ...

  8. 通过dblink impdp导入

    实验: 源数据库:10.5.129.160 dwhtest 需要导入的数据库:10.5.129.130 dwhtest 在10.5.129.130上创建DBLINK SQL> create  p ...

  9. java HastTable实现

    public class HashTable{ private String[] name;    //关键字 private int sum;    //容量 public static void ...

  10. 第k大数问题

    解法1: 我们可以对这个乱序数组按照从大到小先行排序,然后取出前k大,总的时间复杂度为O(n*logn + k). 解法2: 利用选择排序或交互排序,K次选择后即可得到第k大的数.总的时间复杂度为O( ...