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. 10Spring高级----青软S2SH(笔记)

  2. sqlserver事务加锁机制

    锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...

  3. db2、Oracle存储过程引号用法

      在存储过程中,单引号有两个作用,一是字符串是由单引号引用,二是转义.单引号的使用是就近配对,即就近原则.而在单引号充当转义角色时相对不好理解     1.从第二个单引号开始被视为转义符,如果第二个 ...

  4. Html报表用Excel打开保持表格线【Html报表模板】

    注:本人调试的最简版,前两处红色部分是为了输出Excel表格线:x:str表示输出为文本样式,避免被输出为科学计数法. <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. [Python] from scipy import sparse 报 DLL load failed：找不到指定模块错误

    依赖vc运行环境.需要安装 vc_redist Py3.5要安装2015版 传送门: https://www.microsoft.com/zh-CN/download/details.aspx?id= ...

  6. 玩QQ游戏，见到好几个图像是美女的QQ，就不始玩

    玩QQ游戏,见到好几个图像是美女的QQ,光占坑就是不开始玩 加了一个,发现是传播不良网站的QQ 聊天还是自动的 估计是利用webqq写的程序,也就那几句话来回重复,让你去注册网站什么 可以加这个Q去体 ...

  7. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  8. ubuntu

    mongoChef: http://3t.io/mongochef/download/core/platform/#tab-id-3 背景色改成豆沙绿: /usr/share/themes/Ambia ...

  9. python , angular js 学习记录【3】

    1.Alembic是SQLAlchemy作者编写的Python数据库迁移工具.用它实现模型类和数据库的同步更新.(安装以及操作步骤 使用Alembic迁移数据库) 使用Alembic添加数据库字段操作 ...

  10. ajax简单应用

    var xmlhttp;if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new ...