Реагировать по ссылке OnClick предотвратить href - PullRequest
Новая
       13

Реагировать по ссылке OnClick предотвратить href

0 голосов
/ 28 февраля 2019

У меня есть ссылка с функциями href и onClick. 

<a href={menuItem.url}  onClick={e => {
 var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;
      for (let i = 0; checkedItems[i]; i++) {
        checkedItems[i].checked = false;
      }
 window.location.href = menuItem.url;  }}>

Я хочу, чтобы ссылка href была там, чтобы пользователи могли видеть URL при наведении курсора, но я хочу, чтобы выполнялся только onclick.Я пытался 

e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
return false;

Но, похоже, ни один из них не работает.

1 Ответ

0 голосов
/ 28 февраля 2019

Одним из решений было бы добавить новый «внутренний элемент», такой как <span>, внутри элемента <a> и связать обработчик событий onClick с event.stopPropagation() с этим внутренним элементом.

Это приведет к тому, что <span> перехватит и остановит распространение события щелчка, прежде чем оно всплывет до родительского <a> (что по умолчанию заставит браузер перейти на URL href).

Этот метод по-прежнему сохраняет видимость URL-адреса, присвоенного атрибуту href <a> для пользователя, когда он находится под курсором мыши: 

<a href={menuItem.url}>
    <span onClick={e => {

        // Intercepts and prevents the event from propagating up to the parent <a>
        e.stopPropagation();

        // Your existing logic for the onClick event
        var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;

        for (let i = 0; checkedItems[i]; i++) {
            checkedItems[i].checked = false;
        }

        window.location.href = menuItem.url;

    }}> The text label for your link </span>
</a>

Чтобы этот метод работал, предполагалось, что между границей блока (внешней границей) <a> и границей блока внутренней <span> нет заполнения. Вот jsFiddle (не jsx), демонстрирующий общую идею.

Надеюсь, это поможет!

...