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. MySQL的if，case语句使用总结

    原文地址: http://outofmemory.cn/code-snippet/1149/MySQL-if-case-statement-usage-summary

  2. yii2创建数据表

    原文地址: http://blog.csdn.net/xiaoyangxiaodong/article/details/45026865

  3. cookie操作简单实现

    var Cookie = { get:function(key){ var reg = new RegExp('(?:^| )' + key + '=([^;]+)(?=;|$)','gi'); re ...

  4. Bubble Cup 8 finals C. Party (575C)

    题意: 给定n个人,分两天晚上去夜总会开派对,要求每天恰好有n/2个人去,且每人去的夜总会各不相同. 每个人对不同的晚上不同的夜总会有不同的满意度,求一个方案使得所有人的满意度之和最大. 夜总会数量= ...

  5. 笔记：程序内存管理 .bss .data .rodata .text stack heap

    1.未初始化的全局变量(.bss段) bss段用来存放 没有被初始化 和 已经被初始化为0 的全局变量.如下例代码: #include<stdio.h> int bss_array[102 ...

  6. 几大主流浏览器内核（Rendering Engine）

    "浏览器内核",英文为"Rendering Engine",也叫"渲染引擎",作用是帮助浏览器来渲染网页的内容,将页面内容和排版代码转换为用 ...

  7. 每天写点python

    1.收集系统信息python小程序 1 #!/usr/bin/env python 2 #A system information gathering script 3 4 import subpro ...

  8. 2.0、Hibernate框架的简单搭建

    一.Hibernate:是一个开放源代码的对象关系映射框架,对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句 ...

  9. Thrift的TJsonProtocol协议分析

    Thrift协议实现目前有二进制协议(TBinaryProtocol),紧凑型二进制协议(TCompactProtocol)和Json协议(TJsonProtocol). 前面的两篇文字从编码和协议原 ...

  10. saltstack 把数据返回到mysql服务器

    环境:http://www.cnblogs.com/zzzhfo/p/5790918.html master端需要安装MySQL-python和mysql-server mysql-server用于存 ...