zoukankan      html  css  js  c++  java
  • 阻止Bootstrap的dropdown-menu的弹框事件,取消Bootstrap的dropdown-menu点击默认关闭事件

    <div id="com-choose" tabindex="4"  class="dropdown">
                            <a href="#" title="连接" id='command-connecting-a' type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img src="./static/img/icon/connect.png" alt="">
                                <span>连接</span>
                            </a>
                            <ul class="dropdown-menu nav-li-hovershow" aria-labelledby="command-connecting-a"></ul>
                        </div>
     
     function searchDevice(e) {
            $('#com-choose>.nav-li-hovershow').html('');
            var deviceList = ipc.sendSync('searchDevice');
            switch (deviceList.length) {
                case 0:
                    // $("#com-choose>.nav-li-hovershow").html("<li>没有查找到设备</li>");
                    console.log('123');
                    $("#command-connecting-a span").html('连接')
                    alert('没有查找到设备!');
                    e.stopPropagation(); //阻止事件
                    break;
                default:
                    let exp = /.*((.*))/;
                    let device = ''
                    deviceList.forEach(element => {
                        device += '<li><a href="#">' + element.deviceName.match(exp)[1] + '</a></li>';
                        // console.log(element);
                        
                    });
                    $("#com-choose>.nav-li-hovershow").html(device);
                    // $('.device-show-list').toggle();
                    break;
            }
            
        }


    <div class="dropdown"> <a href="#" data-toggle="dropdown"> <i class="fa fa-cog fa-2x"> </i> </a> <div class="dropdown-menu jq22-container"> <div id="treeview" class=""></div> </div> </div>


    在dropdown-menu中的需要处理的元素添加 data-stopPropagation=”true”,data-stopPropagation属性是用来对点击时停止传播事件,这样我们的点击事件就不会传播给Bootstrap.js中去了。

    调用Bootstrap的stopPropagation()函数,可以阻止元素点击时停止传播事件。
    对整个treeview声明一个click事件,并且全部绑定上stopPropagation()方法。

    $(".treeview").on("click",function (e) {
        e.stopPropagation();
    })
  • 相关阅读:
    设计模式——单例模式的一种比较好的写法
    设计模式——观察者模式
    Java中的注解原来是这么用的
    TCP三次握手 四次挥手
    Mat转IplImage IplImage转Mat
    《Android开发艺术探索》读书笔记——Cha3.2.2使用动画实现View的滑动
    11第十二天DBUtils
    Java中几种对象(PO,BO,VO,DTO,POJO,DAO,Entity,JavaBean,JavaBeans)
    10第十一天JDBC事务控制管理
    09重点复习
  • 原文地址:https://www.cnblogs.com/dolphin-369/p/11851133.html
Copyright © 2011-2022 走看看