Как предотвратить щелчки на указанных элементах внутри тега <a>, которые не имеют ссылок?

Question

Как предотвратить щелчки на указанных элементах внутри тега <a>, которые не имеют ссылок?

0

У меня есть часть HTML, как:

<a href="http://site.com">
  <span id="a">Click here to link to site.com</span>
  <span id="b">Click here not to link to site.com</span>
</a>

Не меняя структуру DOM, просто используя JavaScript, как я могу запретить привязку span#b от ссылки на сайт.com при нажатии?

Я использую jQuery в этом проекте, поэтому лучше реализовать его с помощью jQuery.

Благодаря,

Обновить:

Извините, я нашел ответы, которые return false или .stopPropagation() не работает в конкретной ситуации. Поэтому я добавил более подробную информацию:

Это дерево DOM, жаль, что мне нужно скрыть некоторые личные данные:

Вот связанный код:

$('.span_wrapper').click(function(e){
  e.stopPropagation();
  alert('clicked');
  return false;
});

Он по-прежнему ссылается на страницу на значение href внешнего тега <a>.

Обновление: вот видео, объясняющее, что я пытался:

https://www.facebook.com/photo.php?v=10201864154343615

AGamePlayer 03 окт. 2013, в 15:11

Источник

Теги:

javascript

jquery

html

3 ответа

Ещё вопросы

Anthony Grist · Answer 1 · 2013-10-03T09-52-00.000Z

Просто запретите событие размножаться /#b элемента #b до элемента <a>:

$('#b').on('click', function(e) {
    e.preventDefault();
    // any other code to react to this click here
});

Там также сокращенная версия для достижения того же самого (если у вас нет другой логики):

$('#b').on('click', false);

Из документов:

Значение false также допускается как сокращение для функции, которая просто return false.

Вызов return false из обработчика события jQuery является эквивалентом вызова как event.stopPropagation() и event.preventDefault(). Преимущество вызова e.preventDefault() в начале функции состоит в том, что он все равно будет препятствовать соблюдению ссылки, даже если есть ошибки, вызванные выполнением остальной функции обработчика.

ПРИМЕЧАНИЕ. Как всегда при работе с элементами вам необходимо убедиться, что они действительно существуют, прежде чем пытаться это сделать. Это либо означает готовый обработчик DOM, либо перемещает сценарий в конец HTML-документа непосредственно перед </body>.

@DineshKanivu Работает для меня: jsfiddle.net/29hdV Я добавил примечание о том, что элементы действительно существуют, прежде чем работать с ними, если он не работает для вас, то, скорее всего, это так (или вы сделали что-то еще не так).
@ Энтони Грист jsfiddle.net/29hdV/1 Только для вашего предыдущего ответа я прокомментировал
@DineshKanivu Да, только что проверил это. Кажется странным, так как это должно быть распространение, а не поведение по умолчанию, которое заставляет привязку следовать. Я отредактирую свой ответ.
Хорошо, так держать :) @ Энтони Грист
Не работает, не могли бы вы взглянуть на мой обновленный вопрос?
$ ('# b'). on ('click', false); Работаю Cooooooooooooooooolll ... @ Aw Qirui Guo> Проверьте еще раз
@AwQiruiGuo Где код по отношению к HTML? Если это перед HTML для элементов, вам понадобится готовый обработчик DOM для выполнения этого кода.
@DineshKanivu Пока не работает. Кстати, мне нужен щелчок, чтобы сделать что-то, поэтому все еще нужна функция.
@AnthonyGrist Спасибо за комментарий, но я уверен, что сделал это, когда DOM будет готов.
@AwQiruiGuo Попробуйте вызвать e.preventDefault() в самом начале функции обработчика событий, а затем проверить инструменты разработчика вашего браузера на наличие ошибок JavaScript в остальной части функции. Если будет выдано сообщение об ошибке до того, как оно достигнет строки return false оно перейдет по ссылке.
@AnthonyGrist Извините, не работает. Я попытался $span_wrapper.click(function(e){ e.preventDefault(); e.stopPropagation(); return false; });
@AnthonyGrist Даже попытался прикрепить событие прямо в консоли. Это означает, что DOM, безусловно, готов. Все еще направляю меня к цели href.
@AnthonyGrist Я загрузил видео об этом. facebook.com/photo.php?v=10201864154343615 Пожалуйста, посмотрите (необходимо выбрать «HD», чтобы увидеть текст). Благодарю.

Richard Banks · Answer 2 · 2013-10-03T10-06-00.000Z

1

что-то вроде этого будет работать, я думаю

$("a #b").click(function(){return false});

Richard Banks 03 окт. 2013, в 10:06

0

Спасибо за ответ, но он не работает, не могли бы вы взглянуть на мой обновленный вопрос?
AGamePlayer 03 окт. 2013, в 13:09
0

@Aw Qirui Guo Привет, это хорошо работает для меня. Должно быть что-то еще в вашем коде.
Richard Banks 03 окт. 2013, в 13:12

letiagoalves · Answer 3 · 2013-10-03T10-52-00.000Z

Остановить распространение, связанное с событием click чтобы span#b

$('#b').click(function(e) {
   e.stopPropagation();
   return false;
});