LINUX.ORG.RU

Делаем div кликабельным: anchor-tag или onclick

 ,


0

2

Зашел спор, а точнее срач в скайпе насчет того как правильно делать div'ы кликабельными

Ну, например, несколько квадратов - хочу сделать их кликабельными:

<div class="quad">
     <p>This is content1</p>
</div>

Мне нужно оборачивать их так:

<a href="http://ya.ru"><div class="quad">
     <p>Variant 1</p>
</div></a>

Или прописывать событие onClick?

<div class="quad" onClick="document.location='http://ya.ru'">
     <p>variant 2</p>
</div>

Речь идет о списке товаров, и клик должен вести на страницу товара.

Что семантически правильно? Например, с точки зрения HTML5.

Поиграться можно тут - https://jsfiddle.net/67gzad4h/



Последнее исправление: JANB (всего исправлений: 1)

можно еще: текст внутри в <a>, див — onClick

zarkone ★★
()
<a href="http://ya.ru">
     <span>Variant 3</span>
</a>
a,
span {
     display: block;
}
nutsandmilk ★★★
()

Из-за таких, как ты, потом интернеты в браузерах тормозят и Ctrl+Shift+клик неправильно работает.

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

greatperson
()
Ответ на: комментарий от ThisNameWasFree

И если далеко засунуть открытие ссылки JS'ом (не inline'ом в тот же элемент, а в отдельный JS с вызовом в onlick), то политика браузера может игнорировать подобное поведение.

ThisNameWasFree
()

Если очень хочется извращений, то

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

https://developers.whatwg.org/text-level-semantics.html#the-a-element

Some elements are described as transparent; they have «transparent» in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is «transparent» are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

Deleted
()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от Deleted

Если очень хочется извращений, то

Ненене, хочется именно правильного способа, никаких извращений и костылей.

Как делаете Вы?

JANB
() автор топика
Ответ на: комментарий от JANB

Ну тебе ж уже подсказали: <a style=«display:block;»>...</a> в плане отображения абсолютно идентичен <div>...</div>, и больше оборачивать что-либо необходимости (если такая необходимость не следует из каких-то других целей).

greatperson
()
Ответ на: комментарий от JANB

Стандарт разрешает, значит не костыль.

А вообще, «по обстоятельствам». Если там реально только простой текст внутри или неинтерактивные блоки, то проще https://www.linux.org.ru/forum/web-development/12254164?cid=12254291 (комментарий).

Если внутри есть интерактивные элементы (кнопки, другие ссылки), то этот вариант не подходит, тогда div. Возможно с <a> вокруг других блоков, не являющихся интерактивными.

Deleted
()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от greatperson

float элементы являются блоками.

Deleted
()
Ответ на: комментарий от Deleted

Стандарт разрешает,

Ну стандарт и onclink разрешает...

В любом случае, спасибо, я понял Вашу позицию!

JANB
() автор топика
Ответ на: комментарий от greatperson

в плане отображения

Да знаю я про display:block))

Меня интересует как правильно!) Желательно с аргументацией, мол: "вот решение w3c они так говорят делать".

JANB
() автор топика
Ответ на: комментарий от JANB

вот решение w3c они так говорят делать

Нельзя считать все решения от W3C эталоном правильности. Например, в HTML 4.01 они закапывали target="_blank" для <a>, причём аналогичное поведение можно было реализовать и с помощью жабоскрипта, но это же не значит что эта реализация является правильной.

h578b1bde ★☆
()
Последнее исправление: h578b1bde (всего исправлений: 1)
Ответ на: комментарий от greatperson

Два ведра компота этому юноше, за мой счёт! Задрали любители делать через JS то что элементарно делается чистым HTML+CSS.

MrClon ★★★★★
()
Ответ на: комментарий от JANB

Адекватные люди инлайн-хэндлерами не пользуются в 2016.

Deleted
()

Весомый довод против onclick - отсутствие индексации краулерами.

Deleted
()
Последнее исправление: Rainor (всего исправлений: 1)
Ответ на: комментарий от ThisNameWasFree

В хром и сафари, если нет cursor: pointer - клик хендлеры не вызываются. В остальном не должно быть никаких проблем.

zz ★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.