Как сделать элемент кликабельным внутри блока, но при этом чтобы сам блок не фиксировал клик?
У меня в системе есть уведомления, при нажатии на блок уведомления происходит переход на страницу с чем это уведомление связано. Бывают случаи когда уведомление можно просто отметить как прочитанное. код:
текст уведомления удалить блок 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"); // другой код, который убирает уведомление. >); Кликабельный DIV
Когда нужно осуществить открытие какой-либо страницы по нажатию на целую таблицу или же блок, наполненный контентом разного рода, тогда-то и нужен кликабельный DIV. Включим логику: нам нужно сделать заключенную в DIV область кликабельной, т.е. при нажатии должна открываться веб-страничка. Для этого нужно обратиться к событию onclick на JavaScript, и прописать туда действие, смену адреса страницы. Конечно, нужно обозначить, что область кликабельна: пропишем в CSS курсор как у ссылок.
Есть альтернативный вариант, но он требует JQuery. Это не плохо. Визуально все то же самое, но для просматривающих код страницы, возможно, это покажется удивительным. Но это в том случае, если Вы поместите скрипт подальше от кода самого блока. У самого тега DIV нет балласта, т.е. событие задается отдельно. И при этом самая главная изюминка здесь в том, что ссылка берется из лежащей внутри «дивки» ссылки.
Если JQuery не установлен, воспользуйтесь следующим кодом:
Стили CSS – Создаем Кликабельный DIV
Вы, наверняка, хоть раз сталкивались с задачей сделать блок контента, заключенный в DIV, кликабельным. Эта затея отлично реализована на сайте веб-компании StudioForYou – этим приемом обеспечена кликабельность разноцветных блоков!
Итак, как же это делается?
HTML -код трюка:
<div onclick="location.href='Гиперссылка';" style="cursor: pointer;"></div>
Style-параметр превращает курсор мыши в привычный для гиперссылок «пальчик» при наведении на кликабельный DIV.
Кликабельный div
Картинка и название темы, а также кавычка-елочка кликабельны и ведут по ссылкам.
Вся остальная область также кликабельна и ведет туда же, куда ведет название темы.
$4 [9999]
»
Первое сообщение темы
hr < border-style: solid none none none; border-width: 1px; clear: both; >
hr.nomarg < margin: 0; >
small < font-size: 0.8em; max-width: 100%; >
.thread < padding: 10px; >
.hand < cursor: pointer; overflow: hidden; >
.thumb
Цвета не пишу, они в отдельном css-файле и значения не имеют.
Также стоит отметить, что на сайте кроме ссылок от корня кое-где используются относительные ссылки, которые отсчитываются от тега base.
Сайт верстается для телефонов. Несмотря на то, что Opera Mini и Opera Mobile в теории поддерживают window.location, — на практике эта поддержка. Короче говоря, может бросить на выбор: либо обратно на список тем, либо вообще в случайную тему, либо все-таки туда куда надо. И все это только при попытке открыть страницу в новой вкладке. Сначала я погрешил на ссылку от корня. Решил написать ее с адресом сайта, чтоб наверняка. Ну может нужен Опере такой костыль. Никакой разницы. По-прежнему происходит черте что.
Поэтому вопрос: как сверстать необходимый мне шаблон без использования window.location?
Шаманил с ссылкой с параметром position: absolute, но ее не ограничить родителем. Пытался использоваться вместо div тег a с display:block — так внутри ссылки нельзя размещать другие ссылки, браузеры при виде следующей ссылки предыдущую сразу закрывают.
Обернуть div в a, как я сделал с картинкой — только частичный выход из положения, некликабельным остается текст в теге , т.е. приходится целиться между строчек, но это как раз единственный рабочий способ на мобильных Операх, причем там можно целиться куда угодно. Если совместить оборачивание div в a и div onclick, то приоритет имеет, конечно, onclick и выходом это тоже не является.
Изменено 20 ноября 2011 пользователем 7ion