javascript - Bootstrap `nav` 元素不可点击

Question

我有一个引导 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;
  }

请注意，这是一个 Electron 应用程序，其中窗口是无框架的。

任何想法，，

编辑

我意识到 -webkit-app-region: Drag; 将使整个 nav 不可点击。

Answer 1

From MDN:

pointer-events: none;

none: The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

这意味着您需要从 svg i-close 中删除 pointer-events: none;:

$("#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>