Вопрос по javascript, jquery – как не ставить галочку при нажатии на ссылку внутри ярлыка

16

У меня есть ссылка внутри ярлыка. Проблема в том, что когда пользователь нажимает кнопку «назад» после прочтения терминов флажок снят, потому что когда они нажимают на ссылку, они также снимают флажок одновременно, так как ссылка находится внутри метки.

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="/terms">Terms</a></label>

Как я могу предотвратить установку флажка при нажатии на ссылку? Пробовал делатьevent.preventDefault() при нажатии на ярлык, но это не мешает проверке / снятию флажка.

Я мог бы просто взять ссылку внутри ярлыка (что означает больше стиля CSS). Но теперь мне интересно, возможно ли вышеизложенное.

Ваш Ответ

8   ответов
3

<label for="terms">I agree to be bound by the</label> <a href="/terms">Terms</a>
0

так как нажатие на нее вызовет два действия (открытие ссылки и установка флажка).

Пользователь ожидает запуска только одного действия, если ссылка выглядит как ссылка, которую он ожидал отнести к цели ссылки, или если текст связан с флажком, пользователь будет ожидать, что он установит флажок.

0

но ссылка фактически открывает новое окно при нажатии. Это не проверяет / снимает флажок. Я полагаю, что это потому, что клик не всплывает по ссылке на ярлык.

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

$('label a').click(function(ev) { ev.preventDefault(); window.location.href = $(this).attr('href'); }

(Это непроверенное и не самое приятное использование JS, но оно должно решить вашу проблему)

0

что это лучше, потому что, возможно, пользователь уже заполнил некоторые данные на странице), то это можно сделать даже без js

<input type="checkbox" id="agreed" />
<label for="agreed">
    I agree with <a href="/terms-of-use" target="_blank">Terms of use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a>
</label>

вот пример JS Fiddle

http://jsfiddle.net/davo3/zkcv3L3d/

0

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

0

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

function stopLabel(e) {
    e.preventDefault();
    window.location= '/terms';
}

Вы также можете поместить их прямо в свой клик, но это немного приятнее, мне кажется.

Вы также должны передать событие в функцию:

<label for="terms">I agree to be bound by the <a href="/terms" onclick="stopLabel(event);">Terms</a></label>

Если вы решили открыть его в новом окне, вы можете просто изменить window.location на window.open

15

& Quot; вернуть false; & quot; part предотвратит перемещение события click к метке.

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="#" onclick="window.open('/terms','_blank');return false;">Terms</a></label>
В моем случае мне пришлось заменитьonclick ноonmousedown
5

target="_blank" в новых вкладках.

/*
    Fix links inside of labels.
*/
$( 'label a[href]' ).click( function ( e ) {

    e.preventDefault();

    if ( this.getAttribute( 'target' ) === '_blank' ) {
        window.open( this.href, '_blank' );
    }
    else {
        window.location = this.href;
    }
});

Похожие вопросы