编辑

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：

指针事件：无；

无：元素永远不是指针事件的目标；但是，如果指针后代的指针事件设置为其他值，则指针事件可以将其后代元素作为目标。在这种情况下，指针事件将在事件捕获/冒泡阶段期间按适当的方式触发该父元素上的事件侦听器。

这意味着您需要从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>

Answer 2

根据我在问题的最后添加的内容，解决方案包括：

-webkit-app-region:no-drag;

两个按钮的css文件中。

感谢您的时间和精力。

Bootstrap`nav`元素不可点击

编辑

2 个答案: