e.stopPropagetion();

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

    <style>

        ul,li{padding:0;margin:0;}

        li{list-style: none;}

        .member-grounp{width:200px;height:200px;background:green;}

        .member-grounp li span{width:50px;height:50px;background:red;display:block;}

        /*挂断，发言，移除*/

        .b_main{position:absolute;left:50%;top:50%;width:88px;}

        .out{

            position:absolute;

            top:7px;

            border-color:transparent #d9d9d9 transparent transparent;

            border-style:dashed dashed solid dashed;

            border-width:8px;

        }

        .dashed{

            position:absolute;

            border-color:transparent #ffffff transparent transparent;

            border-style:dashed dashed solid dashed;

            border-width:8px;

            top:-8px;

            left:-6px;

        }

        .mem-operation{

            position:relative;

            border:1px solid #d9d9d9;

            padding:5px 0;

            left:16px;

            border-radius:5px;

            background:white;

        }

        .mem-operation li{border-bottom:1px solid #d9d9d9;height:40px;line-height:40px;position:relative;text-align:right;cursor:pointer;padding:0 10px;}

        .mem-operation li:last-child{border:0;}

        .mem-operation li i{display:block;width:27px;height:23px;position:absolute;top:50%;margin-top:-11px;z-index: 2;}

        .mem-operation li i.hangupI{background: url(../images/meeting.png) no-repeat;background-position:-143px -24px;}

        .mem-operation li i.speakI{background: url(../images/meeting.png) no-repeat;background-position:-143px -48px;}

        .mem-operation li i.removeI{background: url(../images/meeting.png) no-repeat;background-position:-143px -80px;}

    </style>

</head>

<body>

    <ul class="member-grounp">

        <li>

            <span class="m-icon"></span>

        </li>

    </ul>

    <div class="b_main" id="meetingSet" style="display:none;">

        <ul class="mem-operation">

            <li><i class="hangupI" style=""></i>挂断</li>

            <li><i class="speakI"></i>发言</li>

            <li><i class="removeI"></i>移除</li>

        </ul>

        <div class="out">

            <div class="dashed"></div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    $(".member-grounp").on('click',"li .m-icon",function (ev) {

        var omeetingSet = document.getElementById("meetingSet");

        // 获取event对象，兼容性写法

        var ev = ev || event;

        //判断显示

        omeetingSet.style.display="block";

        var mouseDownX = ev.clientX;

        var mouseDownY = ev.clientY;

        omeetingSet.style.left = mouseDownX+"px";

        omeetingSet.style.top = mouseDownY+"px";

        $(document).on("click", function(){

            omeetingSet.style.display="none";

        });

        ev.stopPropagation();

    });

    $(".member-grounp").on('click',"li",function (ev) {

        var ev = ev || event;

        ev.stopPropagation();

    });

</script>

jq冒泡之——点击其他地方隐藏的更多相关文章

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

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

  2. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

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

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

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

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

  5. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

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

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

  7. vue 点击其他地方隐藏dom

    document.addEventListener('click', function (e) { if (document.getElementsByClassName('keywordContai ...

  8. 点击其他地方隐藏div

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

  9. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

随机推荐

  1. Parse Fatal Error at line 4 column 43: 已经为元素 "web-app" 指定属性 "xmlns"。

    打开web.xml;最上面的web-app里面,看有没有重复的,重点关注xmlns="http://java.sun.com/xml/ns/javaee" ,如果重复,删去就好~~ ...

  2. Java优先队列

    按照Java api的说法: java.util.PriorityQueue.PriorityQueue() Creates a PriorityQueue with the default init ...

  3. 斐波拉契数列加强版——时间复杂度O(1)，空间复杂度O(1)

    对于斐波拉契经典问题,我们都非常熟悉,通过递推公式F(n) = F(n - ) + F(n - ),我们可以在线性时间内求出第n项F(n),现在考虑斐波拉契的加强版,我们要求的项数n的范围为int范围 ...

  4. Python 局部变量与全局变量

    本来以为 局部变量就是在函数/def/class/lambda内部的变量,全局变量就是在之前这些之外的变量.但是,再一次学习Python atm 中应用时发现了一次特例(意外) 字典中 在函数内部改变 ...

  5. Python中模块安装文件的创建及使用

    在Python编程中,我们常常需要自己编写模块,当模块文件写好了,就需要创建安装文件,方便模块的发布. 此时,常用的方法,就是使用Python distutils(代表distribution uti ...

  6. python 文件操作（转）

    python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...

  7. C# HttpWebReqeust和HttpWebResponse发送请求

    var request = (HttpWebRequest)WebRequest.Create("URL"); var data = Encoding.UTF8.GetBytes( ...

  8. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  9. AM335x kernel 4.4.12 i2c eeprom AT24c02驱动移植

    kernel 4.4.12 i2c eeprom AT24c02驱动移植 在kernel make menuconfig ARCH=ARM 中打开: Device Drivers ---> Mi ...

  10. BZOJ 2086: [Poi2010]Blocks

    Description 每次可以将大于 \(k\) 的一个数 \(-1\), 在左边或右边的数 \(+1\) ,问最大能得到多长的序列每个数都大于等于 \(k\) . Sol 单调栈. 这道题好神啊q ...