Как запретить клик на JS, для элементов без нужного класса?

Question

[Cheizer]

Друзья, есть три класса, для них нужно разрешить по умолчанию клик по тегу A, а для всех остальных у которых нет этих трех классов, запретить, вот пример но он работает в обратном направлении, запрещает клик для элементов с этими тремя классами. Вопрос, а как сделать НАОБОРОТ?

$('.swiper-slide-next a, .swiper-slide-active a, .swiper-slide-prev a').on('click touchstart', function (e) {
            e.preventDefault();
          return false;
        });

Answer 1

[dollar]

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

Код

$('a').on('click touchstart', function (e) {
	let el = e.target;
	while (true) {
		el = el.parentNode;
		if (!el) break;
		if (el.classList
			&& (el.classList.contains('swiper-slide-next')
				|| el.classList.contains('swiper-slide-active')
				|| el.classList.contains('swiper-slide-prev')
			)
		) return;
	}
	e.preventDefault();
	return false;
});

Comments

[Cheizer]

через IF имеете ввиду?

[dollar]

Да, примерно так (не проверял):

spoiler

$('a').on('click touchstart', function (e) {
	let el = e.target;
	if (el.classList
		&& (el.classList.contains('swiper-slide-next')
			|| el.classList.contains('swiper-slide-active')
			|| el.classList.contains('swiper-slide-prev')
		)
	) return;
	e.preventDefault();
	return false;
});

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

Кроме того, такая схема более живучая в плане динамики. То есть если классы добавятся или убавятся, это будет сразу учтено. Но если вы железно повесите блокировку, то при добавлении класса из белого списка блокировка не снимется.

[Cheizer]

dollar, для всех так запрещает. Попробую через IF и hasclass

[Царёв Вадим]

Роман Кузнецов, не совсем понял задачу но наверное условие
if (!div.is(e.target) где div нужно получить .swiper-slide-next a, .swiper-slide-active a, .swiper-slide-prev a

[dollar]

Царёв Вадим, Точно, там же вложенная ссылка в div. Значит, класс нужно проверять у родителя.

spoiler

$('a').on('click touchstart', function (e) {
  let el = e.target.parentNode; // <--------- !!!
  if (el.classList
    && (el.classList.contains('swiper-slide-next')
      || el.classList.contains('swiper-slide-active')
      || el.classList.contains('swiper-slide-prev')
    )
  ) return;
  e.preventDefault();
  return false;
});

[Cheizer]

dollar, так тоже не работает. Сделал так

$('.group_slider .swiper-slide a').on('click touchstart', function (e) {

if ($(this).hasClass('swiper-slide-next swiper-slide-active swiper-slide-prev')){
alert('0');
              }else{
           e.preventDefault();
          return false;
                  alert('1');
              }
        });

И даже так не работает, херня какая то

[dollar]

Роман Кузнецов, проверил, работает.

spoiler

$('a').on('click touchstart', function (e) {
	let el = e.target;
	while (true) {
		el = el.parentNode;
		if (!el) break;
		if (el.classList
			&& (el.classList.contains('swiper-slide-next')
				|| el.classList.contains('swiper-slide-active')
				|| el.classList.contains('swiper-slide-prev')
			)
		) return;
	}
	e.preventDefault();
	return false;
});

[Cheizer]

dollar, Благодарю! Это работает!

Answer 2

[Олег Фролов]

Предполагаю, что так:

$(':not(.swiper-slide-next a), :not(.swiper-slide-active a), :not(.swiper-slide-prev a)').on('click touchstart', function (e) {
            e.preventDefault();
          return false;
        });

Comments

[Cheizer]

Тут получается смотрит если у элемента в котором лежит тег a по которому кликнули, нет класса нужного, то отбой, правильно понимаю?

[Олег Фролов]

Да, правильно.
Но стоит обратить внимание, что это будет касаеться всего докумета, всех ссылок, кнопок, дивов и прочих элементов. Поэтому в этом смысле данная констукция, предполагаю, не совсем корректная.

[Олег Фролов]

Вот так, думаю, лучше:

$('a').on('click touchstart', function (e) {
          var parent = $(this).parent();
          if ($(parent).hasClass('.swiper-slide-next') || $(parent).hasClass('.swiper-slide-active') || $(parent).hasClass('.swiper-slide-prev')) {
          e.preventDefault();
          return false;
          }
});