zoukankan      html  css  js  c++  java
  • 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击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。

  • 相关阅读:
    34 bootstrap引入
    32 jQuery——自制飞粒特效
    32 EasyUI——初识、导入至项目
    前端学习相关
    31 jQuery——元素进出场动画效果
    30 jQuery——操作事件
    30 jQuery——操作文档结构
    29 jQuery——操作元素样式
    28 jQuery——操作元素内容
    27 jquery——操作元素属性
  • 原文地址:https://www.cnblogs.com/yulian/p/5210375.html
Copyright © 2011-2022 走看看