Можно ли сделать внутри блока ссылки некликабельный элемент?

Question

[mishapsv]

Код здесь
Нужно сделать, чтобы спаны с классами type-of-work__item-price и type-of-work__item-time были не кликабельны.
pointer-events: none;
не помогает.
Может быть есть еще идеи?

Answer 1

[DTX]

Нельзя. Оборачивать в < a > только то, что должно быть кликабельно.
Либо обрабатывать клики программно.

Answer 2

[Евгений]

Зачем так извращаться? Вынесите ссылку отдельно а описание ниже и будет счастье.

<div class="type-of-work__item">
    <a href="#" class="type-of-work__link">Контрольная работа</a>
    <div class="type-of-work__meta">
        <div class="type-of-work__meta-item">от 300 грн.</div>
        <div class="type-of-work__meta-item">от 2 дней</div>
    </div>
</div>

Comments

[mishapsv]

Евгений Эта поправка пришла позже, не хотелось менять структуру. К тому же кликабельным должно быть и изображение (Там картинки не подгрузились)

Answer 3

[Роман Татаринов]

Можно. Например я такое часто использую, если в адаптивной верстке мне необходимо на ссылку меню справа повесить span, при нажатии на который будет отменено свойства перехода по ссылке и произойдет выпадение подменю. Но делаю я такое исключительно при адаптиве, причем span помещаю скриптом тоже. Делаю это вот таким образом:

//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню
	$('.left-menu__list .left-menu__item').append( function(indx, val){
		if($(this).find('.left-menu__list').length != 0)
		 return '<span class="arrow">&rsaquo;</span>';
		else
		 return '';
	});
//Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню"
//Раскрытие меню при нажатии на "стрелку"
	$('.arrow').click(function(){
		$(this).toggleClass('arrow-switch');
		$(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open');
	});
//Окончание секции "Раскрытие меню при нажатии на "стрелку"

Нужным классам прописываю нужные стили.

.left-menu__list {
    max-height: 0;
    -webkit-transition: 800ms ease all;
    transition: 800ms ease all;
}
.left-menu__list--open {
    max-height: 320px;
    -webkit-transition: 800ms ease all;
    transition: 800ms ease all;
}

Так я получаю плавное выпадение списка подменю внутри меню, если такой существует.

Answer 4

[trushka]

Можно задать некликабельным элементам onclick="return false"

<span class=" type-of-work__item-price"  onclick="return false">

Ну, или скриптом лучше задать, на body, например, повесить

Answer 5

[Глойнус Алеос]

Есть вариант на чистом CSS. Но он не вполне мультибраузерный.
Вот ссылка на источник: blogo-daru.ru/2015/11/05/kak-sdelat-ssylku-neklika...
Суть в том, что в CSS4 есть свойство: pointer-events. Если ему задать значение «none», то объект перестанет быть кликабельным. Не работает в старых браузерах.