Можно ли запретить браузеру переходить по ссылке, когда срабатывает щелчок дочернего элемента?

Это то, что у меня есть в основном:

<a href="http://somelink.com">
    <span>stuff</span>
    <span onclick="AwesomeFunction();">more stuff</span>
    <span>the last stuff</span>
</a>

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

я пробовал

event.stopPropagation();

но это, кажется, только останавливает запуск события onclick ссылок, или я делаю что-то не так.

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


javascript dom-events
person Oscar Kilhed    schedule 22.10.2009    source источник

Ответы (3)


arrow_upward
34
arrow_downward

Заставьте метод javascript возвращать false!

Или вы также можете использовать event.preventDefault() вместо event.stopPropagation()

person Carl Bergquist    schedule 22.10.2009
comment
event.preventDefault() это не jQuery. Это просто старый добрый JavaScript. - person MJ Walsh; 25.06.2015

arrow_upward
9
arrow_downward

конечно, просто верните false в onclick

что-то вроде

<a href="somwhere" onclick="return false;">nothing happens</a>
person Victor    schedule 22.10.2009
comment
Ну... Это не совсем так. Он по-прежнему хочет переходить по ссылке, когда щелкает другие промежутки. Этот код не позволит браузеру перейти по ссылке при любом нажатии на нее. Не только диапазон с событием onClick. - person Sani Singh Huttunen; 22.10.2009

arrow_upward
2
arrow_downward

Чтобы отменить щелчок по ссылке, лучше всего сделать эти две вещи в вашем обработчике ссылок...

  1. Используйте 1_.
  2. Возврат false

Объяснение

И того, и другого должно быть достаточно, но оба задокументированы и хорошо используются. Использование обоих гарантирует идеальную кросс-браузерную совместимость. Чтобы процитировать документацию разработчика MDN на event.returnVal...

Свойство Event returnValue указывает, было ли предотвращено действие по умолчанию для этого события или нет. По умолчанию установлено значение true, что позволяет выполнять действие по умолчанию. Установка для этого свойства значения false предотвращает действие по умолчанию. (Источник: Веб-документы MDN: Event.returnValue< /сильный>.)

И документация по event.preventDefault...

Метод preventDefault() интерфейса Event сообщает пользовательскому агенту, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, как обычно. (Источник: Веб-документы MDN: Event.preventDefault( ).)

В основном я был вдохновлен ответить, потому что ни в одном другом ответе не было работающих демонстраций, так что вот! (в JavaScript и jQuery)

JavaScript

document.getElementById('move-button').onclick = function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
};
<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

jQuery

$('#move-button').on('click', function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

person HoldOffHunger    schedule 10.11.2020