события javascript — jQuery предотвращение дефолта () не работает

Question

события javascript — jQuery предотвращение дефолта () не работает

У меня есть следующий код:

$(document).ready(function(){

$("div.subtab_left li.notebook a").click(function(event) {
event.preventDefault();
return false;
});

});

но когда я нажимаю на элемент … это не мешает действию по умолчанию .. Почему?

и при изменении кода на:

$(document).ready(function(){

$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});

});

он останавливает действие по умолчанию, но не предупреждает .. Я не смог найти никакого ответа в документах jQuery.

Полный код выглядит так:

$(document).ready(function(){

$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});

$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

alert("asdasdad");
return false;

});

});

и структура HTML:

<div id="tabs">
<ul id="nav">
<li><a id="tab1" href="#tab-1"></a></li>
<li><a id="tab2" href="#tab-2"></a></li>
<li><a id="tab3" href="#tab-3"></a></li>
<li><a id="tab4" href="#tab-4"></a></li>
</ul>

<div class="tab" id="tab-1">
<script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
$("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
</script>

<div class="subtab_left">
<ul>
<li class="notebook"><a href="#">1</a></li>
<li class="netbook"><a href="#">2</a></li>
<li class="allinone"><a href="#">2</a></li>
<li class="desktop"><a href="#">2</a></li>
<li class="procesoare"><a href="#">2</a></li>
<li class="placi_video"><a href="#">2</a></li>
<li class="hdd_desktop"><a href="#">2</a></li>
<li class="tv_plasma"><a href="#">2</a></li>
<li class="tv_lcd"><a href="#">2</a></li>
<li class="telefoane_mobile last_item"><a href="#">2</a></li>
</ul>
</div>

24

event-handling javascript-events jquery

Решение

Другие решения

Попробуй это:

   $("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
return false;
});

6

Попробуй это:

$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
});

2

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

Причина в том, что форма уже опубликована в $(document).read(...

Итак, все, что вам нужно сделать, это изменить это на $(document).load(...

Теперь, когда браузер загрузит страницу, он будет выполнен.

И будет работать; D

1

у меня были одни и те же проблемы — я тестировал много разных вещей. но это просто не сработает.
Затем я снова проверил учебные примеры на jQuery.com и выяснил:

ваш скрипт jQuery должен быть после элементы, на которые вы ссылаетесь!

поэтому ваш скрипт должен быть после HTML-кода, к которому вы хотите получить доступ!

Похоже, jQuery не может получить к нему доступ в противном случае.

1

Если e.preventDefault(); не работает, вы должны использовать e.stopImmediatePropagation(); вместо.

Для получения дополнительной информации взгляните на: В чем разница между event.stopPropagation и event.preventDefault?

$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
});

0

Источник

Accepted Answer

Обновить

И есть твоя проблема — ты делать должны нажать на обработчики событий для некоторых a элементы. В этом случае порядок, в котором вы прикрепляете обработчики, имеет значение, так как они будут запущены в этом порядке.

Вот рабочая скрипка это показывает поведение, которое вы хотите.

Это должен быть ваш код:

$(document).ready(function(){$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');

$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});

$('#tabs ul li a').click(function(){
alert("Handling link click");
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});

});

Обратите внимание, что порядок присоединения обработчиков был изменен и e.stopImmediatePropagation() используется, чтобы остановить обработчик другого клика от return false используется для остановки поведения по умолчанию при переходе по ссылке (а также для остановки всплывающего сообщения о событии. Вы можете обнаружить, что вам нужно использовать только e.stopPropagation).

Поиграйте с этим, если вы удалите e.stopImmediatePropagation() вы обнаружите, что оповещение обработчика второго клика сработает после первого оповещения. Удаление return false не повлияет на это поведение, но заставит браузер переходить по ссылкам.

Заметка

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

Я не понимаю, почему ваш первый фрагмент кода не будет работать. Какое действие по умолчанию вы видите, что хотите остановить?

Если вы добавили к ссылке другие обработчики событий, вам следует event.stopPropagation() а также event.stopImmediatePropagation() вместо. Обратите внимание, что return false эквивалентно вызову обоих event.preventDefault а также event.stopPropagation()^ссылка

Во втором фрагменте кода e не определено. Так что ошибка будет брошена в e.preventDefault() и следующие строки никогда не выполняются.
Другими словами

$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});

должно быть

//note the e declared in the function parameters now
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
alert("asdasdad");
return false;
});

Вот рабочий пример показывая, что этот код действительно работает и что return false на самом деле не требуется, если вы хотите остановить только следующую ссылку.

46