Элемент начальной загрузки `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;
  }

Обратите внимание, что это электронное приложение, в котором окно без рамки.

Любые идеи ,,

Редактировать

Я понял, что -webkit-app-region: drag; сделает целые nav не кликабельными.

Answer 1

В соответствии с правкой, которую я добавил к последнему вопросу, решение заключалось в следующем:

-webkit-app-region:no-drag;

в файле css для обеих кнопок.

Спасибо за ваше времяи усилия.

Answer 2

С MDN :

события указателя: нет;

нет : элемент никогда не является целью событий указателя;однако, события указателя могут предназначаться для его элементов-потомков, если у этих потомков для событий-указателей установлено какое-то другое значение.В этих обстоятельствах события указателя будут инициировать прослушиватели событий для этого родительского элемента соответствующим образом на пути к / от потомка во время фаз захвата событий / пузырей.

Это означает, что вам нужно удалить события указателя: нет; из 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>