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. RabbitMQ常用命令行

    打印了一些rabbitmq服务状态信息,包括内存,硬盘,和使用erlong的版本信息rabbitmqctl -q status 各个参数说明:http://www.rabbitmq.com/man/r ...

  2. runtime

    7．runtime实现的机制是什么,怎么用,一般用于干嘛. 你还能记得你所使用的相关的头文件或者某些方法的名称吗? 运行时机制,runtime库里面包含了跟类.成员变量.方法相关的API,比如获取类里 ...

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

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

  4. 给div添加滚动条

    最简单的方法: <div style="height:300px;width:100px;overflow:auto"><div/>(height和widt ...

  5. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  6. 修改html页面文字选中样式

    ::selection { background-color: #31B0D5; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }

  7. js储存参数的数组arguments

    js函数中有个储存参数的数组arguments ,所有函数获得的参数会被编译器挨个保存到这个数组中.于是我们的js版支持参数默认值的函数可以通过另外一种变通的方法实现 function simue ( ...

  8. AFNetworking 与 gbk 编码格式后台数据的使用

    仅针,后台数据为GBK编码时的AFNetWorking 使用情况: 1. Request failed: unacceptable content-type: text/html     soluti ...

  9. Picard报错“MAPQ should be 0 for unmapped read”的解决方法

    picard对bwa生成的sam文件进行reorder时,报错如下: Getting Help Exception in thread "main" htsjdk.samtools ...

  10. offsetParent的解释

    offsetParent是个只读属性,返回最近显示指定位置的容器元素的父级.如果元素没有指定位置,最近的元素或者根元素(标准模式下是html,怪异模式下是body)就是offsetParent off ...