点击其它地方隐藏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。
点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡的更多相关文章
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)
如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...
- jquery点击其他地方隐藏div层的实现程序
js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...
- 点击其他地方隐藏div
document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- Jquery手机点击其他地方隐藏控件问题
因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...
- 点击其它地方关闭DIV
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
随机推荐
- bootstrap datepicker时间插件显示位置不对
bppystrap-datetimepicker.min.js中,修改如下:将原来的 if(!b(this.element)){l=l+document.body.scrollTop}改 ...
- [BZOJ 1016] [JSOI2008] 最小生成树计数 【DFS】
题目链接:BZOJ - 1016 题目分析 最小生成树的两个性质: 同一个图的最小生成树,满足: 1)同一种权值的边的个数相等 2)用Kruscal按照从小到大,处理完某一种权值的所有边后,图的连通性 ...
- 【POJ2773】Happy 2006 欧几里德
题目描述: 分析: 根据欧几里德,我们有gcd(b×t+a,b)=gcd(a,b) 则如果a与b互质,则b×t+a与b也一定互质,如果a与b不互质,则b×t+a与b也一定不互质. 所以与m互质的数对m ...
- Java FutureTask理解
尊敬原创作者,转载请注明出处: http://blog.csdn.net/gemmem/article/details/8956703 FutureTask是为了弥补Thread的不足而设计的,它可以 ...
- Defining as a "long" or "int" type throws an error on startup
solr启动时候,报如下异常: [java] view plaincopy SEVERE: org.apache.solr.common.SolrException at org.a ...
- Linux Shell编程(10)——引用变量
当要引用一个变量的值时,一般推荐使用双引号.使用双引号除了变量名前缀($).后引符(`)和转义符(\)外,会使shell不再解释引号中其它所有的特殊字符.用双引号时$仍被当成特殊字符,允许引用一个被双 ...
- 区分execl与system——应用程序中执行命令
execl:相关函数:fork, execle, execlp, execv, execve, execvp表头文件:#include <unistd.h>函数定义:int execl(c ...
- Selenium稳定性 Test
[Test] public void DriverExtension_Wait() { var driver = new FirefoxDriver(); driver.Navigate().GoTo ...
- scanf从文件中读入,printf写入到文件
重定向方式读写文件 #include <stdio.h> #define LOCAL int main() { #ifdef LOCAL freopen("input.txt&q ...
- ACM1019_最大公倍数
/*问题说明 一组正整数的最小公倍数(LCM)是最小的正整数约数集合中的所有号码. 例如,5,7和15的最小公倍数是105. 输入 输入将包括多个问题的实例.输入的第一行中,将包含一个整数, 表示问题 ...