Делаем div кликабельным: anchor-tag или onclick
Ну, например, несколько квадратов — хочу сделать их кликабельными:
This is content1 Мне нужно оборачивать их так:
Или прописывать событие onClick?
variant 2
Речь идет о списке товаров, и клик должен вести на страницу товара.
Что семантически правильно? Например, с точки зрения HTML5.
JANB ★
08.01.16 09:55:42 MSK
можно еще: текст внутри в , див — onClick
zarkone ★★
( 08.01.16 10:06:42 MSK )
Выкинуть div вообще.
ritsufag ★★★★★
( 08.01.16 10:26:14 MSK )
a, span
nutsandmilk ★★★
( 08.01.16 10:30:05 MSK )
GoodPerson ★
( 08.01.16 11:32:22 MSK )
Из-за таких, как ты, потом интернеты в браузерах тормозят и Ctrl+Shift+клик неправильно работает.
Естественно, если есть вариант обойтись без JS (а ты сам прекрасно видишь что он есть), лучше обойтись без JS. Так твой сайт будет именно что семантичнее, так сказать, декларативнее, и каждый браузер у каждого пользователя сможет обрабатывать твои ссылки лучше, чем когда ссылки притворяются нессылками и ничего неясно, пока не кликнешь или в код не заглянешь.
greatperson ★
( 08.01.16 13:32:29 MSK )
Ответ на: комментарий от greatperson 08.01.16 13:32:29 MSK
Плюсую. Для ведромобилок с их браузерами onclick иногда не срабатывает корректно, там тап по экрану имеет другое событие.
ThisNameWasFree ★
( 08.01.16 15:34:56 MSK )
Ответ на: комментарий от ThisNameWasFree 08.01.16 15:34:56 MSK
И если далеко засунуть открытие ссылки JS’ом (не inline’ом в тот же элемент, а в отдельный JS с вызовом в onlick), то политика браузера может игнорировать подобное поведение.
ThisNameWasFree ★
( 08.01.16 15:37:50 MSK )
Если очень хочется извращений, то
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).
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
( 08.01.16 16:48:24 MSK )
Последнее исправление: Mystra_x64 08.01.16 16:49:16 MSK (всего исправлений: 1)
Ответ на: комментарий от Deleted 08.01.16 16:48:24 MSK
Ненене, хочется именно правильного способа, никаких извращений и костылей.
JANB ★
( 08.01.16 18:16:00 MSK ) автор топика
Ответ на: комментарий от JANB 08.01.16 18:16:00 MSK
Ну тебе ж уже подсказали: . в плане отображения абсолютно идентичен
, и больше оборачивать что-либо необходимости (если такая необходимость не следует из каких-то других целей).
greatperson ★
( 08.01.16 18:27:39 MSK )
Ответ на: комментарий от JANB 08.01.16 18:16:00 MSK
Стандарт разрешает, значит не костыль.
А вообще, «по обстоятельствам». Если там реально только простой текст внутри или неинтерактивные блоки, то проще https://www.linux.org.ru/forum/web-development/12254164?cid=12254291 (комментарий).
Если внутри есть интерактивные элементы (кнопки, другие ссылки), то этот вариант не подходит, тогда div. Возможно с вокруг других блоков, не являющихся интерактивными.
Deleted
( 08.01.16 18:31:52 MSK )
Последнее исправление: Mystra_x64 08.01.16 18:32:37 MSK (всего исправлений: 1)
Ответ на: комментарий от greatperson 08.01.16 18:27:39 MSK
float элементы являются блоками.
Deleted
( 08.01.16 18:32:24 MSK )
Ответ на: комментарий от Deleted 08.01.16 18:31:52 MSK
Ну стандарт и onclink разрешает.
В любом случае, спасибо, я понял Вашу позицию!
JANB ★
( 08.01.16 18:39:09 MSK ) автор топика
Ответ на: комментарий от greatperson 08.01.16 18:27:39 MSK
Да знаю я про display:block ))
Меня интересует как правильно!) Желательно с аргументацией, мол: «вот решение w3c они так говорят делать» .
JANB ★
( 08.01.16 18:39:55 MSK ) автор топика
Ответ на: комментарий от JANB 08.01.16 18:39:55 MSK
вот решение w3c они так говорят делать
h578b1bde ★☆
( 08.01.16 19:07:08 MSK )
Последнее исправление: h578b1bde 08.01.16 19:07:45 MSK (всего исправлений: 1)
Ответ на: комментарий от greatperson 08.01.16 13:32:29 MSK
Два ведра компота этому юноше, за мой счёт! Задрали любители делать через JS то что элементарно делается чистым HTML+CSS.
MrClon ★★★★★
( 09.01.16 04:40:43 MSK )
Ответ на: комментарий от JANB 08.01.16 18:39:09 MSK
Адекватные люди инлайн-хэндлерами не пользуются в 2016.
Как сделать элемент кликабельным внутри блока, но при этом чтобы сам блок не фиксировал клик?
У меня в системе есть уведомления, при нажатии на блок уведомления происходит переход на страницу с чем это уведомление связано. Бывают случаи когда уведомление можно просто отметить как прочитанное. код:
текст уведомления удалить блок block-notifi весь кликабельный, но бывает такое что уже просмотрел и надо просто убрать уведомление кликнув delet , но проблема в том, что весь блок block-notifi кликабельный из-за этого по клику на delet переходит на страницу, а должно просто убираться уведомление. Как сделать? Код js:
$('.notification-line').click(function()< // Получаем ID id_notification = $(this).data("notification"); id_lead_go = $(this).data("lead-id"); // другой код, который совершает переход на нужную страницу >); $('.delet-notifi').click(function()< // Получаем ID id_notification = $(this).data("id-notification"); id_lead_go = $(this).data("lead-id"); // другой код, который убирает уведомление. >); Отслеживать
2,969 3 3 золотых знака 15 15 серебряных знаков 30 30 бронзовых знаков
задан 30 окт 2015 в 12:13
Alexander Sizintsev Alexander Sizintsev
1,321 1 1 золотой знак 18 18 серебряных знаков 52 52 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
У объект события ( Event ), который в вашем случае даже не используется, есть отличный метод stopPropogation
Метод отменяет всплытие, которое как раз и является корнем вашей проблемы.
Когда вы нажимаете на блок, вызывается обработчик элемента, на которых вы кликнули, после вызывается обработчик ( если есть ) родительского элемента, на чьего потомка вы кликнули и так далее до document , поэтому то и срабатывает обработчик document.onclick , даже если мы кликнем на ul , a т.д.
Вам надо чуть чуть изменить ваш код:
/* объект событие передается в обработчик первым параметром */ $('.delet-notifi').click(function(e)< e.stopPropagation(); // убрали всплытие // Получаем ID id_notification = $(this).data("id-notification"); id_lead_go = $(this).data("lead-id"); // другой код, который убирает уведомление. >); Стили CSS – Создаем Кликабельный DIV
Вы, наверняка, хоть раз сталкивались с задачей сделать блок контента, заключенный в DIV, кликабельным. Эта затея отлично реализована на сайте веб-компании StudioForYou – этим приемом обеспечена кликабельность разноцветных блоков!
Итак, как же это делается?
HTML -код трюка:
<div onclick="location.href='Гиперссылка';" style="cursor: pointer;"></div>
Style-параметр превращает курсор мыши в привычный для гиперссылок «пальчик» при наведении на кликабельный DIV.
Делаем кликабельной любую область сайта
Недавно мне понадобилось сделать часть картинки из шапки сайта ссылкой на главную страницу.
Можно было конечно порезать картинку на части и сделать одну из частей ссылкой, но мне этот вариант не подходил.
Поразмыслив, я нашел другой способ сделать кликабельной какую-то область.
Создаем пустой див, задаем ему нужные нам размеры и позиционирование.
Добавляем свойство onClick и все готово.
Добавьте эти строки в свой файл стилей
#header < background:url('/img/logo.png') repeat-x top; >#logo < float:left; /*как вариант можно использовать position:absolute;*/ width: 315px; /*задаем размеры кликабельной области*/ height:200px; cursor: pointer; /*меняем рисунок курсора, чтобы показать кликабельность объекта*/ >
если вам этого мало и вы хотите сделать объект нестандартной формы, то вам поможет тег «area»
элемент надо располагать внутри тегов
возможные свойства элемента
SHAPE — указывает форму объекта.
значения:
* rect — прямоугольник;
* circle — окружность;
* poly — многоугольник.
COORDS — задает координаты объекта. является «дополнением» атрибутом SHAPE. Способы задания координат для разных типов областей:
* SHAPE=»rect» COORDS=»левый x, верхний y, правый x, нижний y»;
* SHAPE=»circle» COORDS=»центр x, центр y, радиус»;
* SHAPE=COORDS=»A,B,C,D, … ,A,B». Каждая пара задает координаты вершин многоугольника. Первая и последняя пары совпадают задавая замкнутую фигуру;
HREF — определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET — определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезервированных имен, подробно описанных в атрибуте TARGET элемента A.
NOHREF — определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT — определяет альтернативный текст-подсказку для данной области.
Если у вас есть вопросы — пишите в комментариях, с удовольствием вам отвечу.
Не забывайте подписаться на RSS, чтобы не пропустить обновления.
Делаем кликабельной любую область сайта
- ← Почта на сайте
- Генераторы CSS →
19 комментариев к “ Делаем кликабельной любую область сайта ”