Bootstrap`nav`元素是无法单击的

Question

我有一个bootstrap nav元素，其中我内部有一些图标，可关闭和最小化。问题是这些图标无法单击。我试图将它们放置在nav之外，并可以单击。

这是代码：

html

<nav class="navbar navbar-light bg-light" id="custom-navbar">
        <span class="navbar-brand">Project Title</span>
        <div class="navButtons">
            <a href="#" id="i-close">
                <svg style="pointer-events: none;" class="float-right ml-auto nav-icons" viewBox="0 0 32 32" width="20" height="20"
                    fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                    <path d="M2 30 L30 2 M30 30 L2 2" />
                </svg>
            </a>
            <a id='i-minus'>
                <svg class="nav-icons" viewBox="0 0 32 32" width="20"
                    height="20" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2">
                    <path d="M2 16 L30 16" />
                </svg>
            </a>
        </div>
    </nav>

JS

window.$ = window.jQuery = require('jquery')
window.Bootstrap = require('bootstrap')
$("#i-close").click(() =>{
console.log("clicked!")
alert("working")
})

CSS

    /* navbar */
  #custom-navbar{
    -webkit-app-region: drag;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
  }
  /* navbar icons */
  .nav-icons{
    margin:5px;
    padding:5px;
    /* border:0.5px solid black; */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
  }

请注意，这是一个电子应用，其中窗口不框架。

任何想法，

编辑

我意识到-webkit-app-region: drag;将使整个nav无法单击。

Answer 1

来自MDN：

指针 - 事件：无;

无：该元素绝不是指针事件的目标；但是，如果这些后代将指针事件设置为其他值，则指针事件可能针对其后代元素。在这种情况下，指针事件将在事件捕获/气泡阶段触发到后代的途中触发事件听众。

。

这意味着您需要删除指针 - events：none; from SVG I-Close：

$("#i-close").on('click', function (e) {
    console.log("clicked!")
    //alert("working")
})

#custom-navbar {
    -webkit-app-region: drag;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
/* navbar icons */
.nav-icons {
    margin: 5px;
    padding: 5px;
    /* border:0.5px solid black; */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-light" id="custom-navbar">
    <span class="navbar-brand">Project Title</span>
    <div class="navButtons">
        <a href="#" id="i-close">
            <svg style="" class="float-right ml-auto nav-icons" viewBox="0 0 32 32" width="20" height="20"
                 fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                <path d="M2 30 L30 2 M30 30 L2 2" />
            </svg>
        </a>
        <a id='i-minus'>
            <svg class="nav-icons" viewBox="0 0 32 32" width="20"
                 height="20" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round"
                 stroke-width="2">
                <path d="M2 16 L30 16" />
            </svg>
        </a>
    </div>
</nav>

Answer 2

根据我在最后一个问题中添加的编辑，解决方案是包括：

-webkit-app-region:no-drag;

在两个按钮的CSS文件中。

感谢您的时间和精力。