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. SQL语句判断数据库、表、字段是否存在

    from master..sysdatabases where name='TestDB')    print 'TestDB存在'else    print 'TestDB不存在' --判断表[Te ...

  2. Json在PHP与JS之间传输

    1. JS-->PHP a). JS create Json <script> $(document).ready(function(){ /*--JS create Json--* ...

  3. VSTO PowerPoint 代码删除Shape后再恢复出现无法再次获取的问题

    做PowerPoint的VSTO插件项目,遇到个很奇怪的问题,当代码执行删除某些Shape时,没问题,但是操作Undo也就是恢复后,无法再次获取到之前删除的对象,这种情况只在Office2007中出现 ...

  4. C语言（Linux）中常用到的函数

    在接触Linux C之前,我比较少用到的函数,都会记录在这里.(持续更新中……) 在学习malloc()函数原理性实现时, size_t:是一种数据类型,标准C库中定义的一种类型,近似于unsigne ...

  5. JS心得——判断一个对象是否为空

    判断一个对象是否为空对象,本文给出三种判断方法: 最常见的思路,for...in...遍历属性,为真则为"非空数组":否则为"空数组" 2.通过JSON自带的. ...

  6. Sublime Text 3编译Sass - Sublime Text安装Sass插件

    1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...

  7. 耿丹CS16-2班第五次作业汇总

    Deadline: 2016-10-26 23:59 作业内容 实验4-1 求1到20的阶乘的和,其中求阶乘用函数完成. 实验4-2 写一个判素数的函数,在主函数输入一个整数,输出其是否是素数的信息. ...

  8. canvas画圆（一）

    仿第一次效果

  9. Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...

  10. javascript for循环

    2016年12月28日 20:01:54 星期三 html: <a href="aaaa">AAAA</a> <a href="bbbb&q ...