HTML+CSS+JavaScript

Доброго дня,
Подскажите если знаете, как сделать чтобы при первом клике по ссылке перехода не было, а при втором был?
а то с планшета или не разворачивается меню или не переходит в раздел, а надо чтобы первый тач развернул меню, а второй отправил а раздел...

ну меню самое просто

<ul>  <li><a href='/razde/'>Первый уровень</a>   <ul>     <li><a href='/razde/podrazdel/'>Второй уровень</a></li>   </ul>  </li> </ul>

спасибо

А какая задача у пункта "Первый уровень", только раскрывать вложенные в него?

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

я вот такой вариант придумал

var counter = 0;  $(".firstlevel li").click(function(){         if (/android|iphone|ipod|ipad|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {              if(counter==0){ counter=1; return false; }         }     });

В jQuery есть метод .data() и лучше использовать его в этом случае, вместо var counter = 0;...
И для LI return false с боку припеку.

return false не для <li> а для <a> так как на планшете очень просто попасть по ссылке....

то есть как то так надо?

$(".firstlevel li").data('counter', 0).click(function(){          if (/android|iphone|ipod|ipad|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {               if(counter==0){ counter=1; return false; }          }      });

я просто не пользовался раньше .data()

Молодцом, то года почему не $(".firstlevel a")?
И никогда не пишите обращение к элементам по классу так, как вы это делаете. Выбросьте из головы, что вы это видели где-то, а лучше подумайте, что это действие означает.

>Молодцом, то года почему не $(".firstlevel a")?

$(".firstlevel li,  .firstlevel li a")

тогда так нужно, ведь клик может попасть и по ссылке и по <li>
или лучше отдельно прописать

$('.firstlevel li a').click(function(){ return false; });

>И никогда не пишите обращение к элементам по классу так, как вы это делаете. Выбросьте из головы, что вы это видели где-то, а лучше подумайте, что это действие означает.

а как писать?

$("div#menu ul.firstlevel li")

так будет правильнее?

>так будет правильнее?

Вы Золушка, и коварная мачеха, как всегда, нагрузила вас работой. Но, то-ли она тяпнула и подобрела, то-ли по другим каким-то причинам, но на этот раз она "минимизировала условие" - перебрать пакетик, в котором пшено, рис, горох и фасоль, с целю выбрать только спелые фасолинки. Как вы поступите:
а) вы будете перебирать и просматривать каждое зернышко пшена, риса, гороха, фасоли?
б) вы будете просматривать только фасоль?
При каком из вариантов больше шансов попасть на бал?

>ведь клик может попасть и по ссылке и по <li>

А что значит попасть?

>А что значит попасть?

ну тыкая (а именно так делают пользователи на планшетах) по ссылке можно по ней попасть, а можно попасть рядом, но по меню (<li>) так вот мне не надо переходить по ссылке если по ней попали....

<script> $(function(){   $('ul a').click(function() {      alert(this.tagName);   }); });     </script>     <ul>   <li>     <a>Tag A</a>      <span>Tag SPAN</span>   </li> </ul>

Ну-ка пощелкайте, вы добьетесь сообщения о теге SPAN?

События (не все буквально, но это опускаем) имеют одно интересное свойство - умеют всплывать, то есть щелчок по ссылке где-то в глубине таблицы будет по очереди возникать для каждого предка в DOM-дереве, вплоть до объекта document включительно. Благодаря этому событие можно перехватить на каком либо уровне и обработать его. И наоборот, такое поведение события может портить "пейзаж", и перехватив его на некотором уровне, дальнейшее его всплытие запрещают.

Такое поведение событий позволяет делегировать обработку событий родительскому элементу, что во многих случаях более рационально, чем устанавливать обработчик каждому дочернему. Но в данном случае $('ul a').click(), это тоже самое, что и установка обработчика элементам А, а элемент UL упоминается как их родитель (контейнер, в котором нужно их искать). Ну а почему при ссылке на контейнер по его атрибуту желательно указывать тип самого контейнера, читайте выше о Золушке.

нет подождите...
при клике на span ни чего и не должно произойти...

$('ul li').click(function()

вот если бы так было то алерт бы вылез..? (я не проверял, но думаю, что да, раз события наследуются)

но я сейчас не об этом..
Тема развилась из вопроса зачем там return false;
так вот если вы нажмете на ссылку, то алерт появится, но ведь и переход будет совершен... разве не так?

<script>  $(function(){    $('ul li').click(function() {       alert(this.tagName);    });  });      </script>      <ul>    <li>      <a>Tag A</a>       <span>Tag SPAN</span>    </li>  </ul>

а мне то этого и не надо...

Вам необходимо обрабатывать событие от ссылки, блокируя переход по условию. Но вы вместо того, чтобы поставить обработчик ссылкам (определить источник события), почему-то обрабатываете его на уровень выше. Свое действие вы поясняете тем, что могут тыкнуть мимо. Вот я привел пример - если я установил обработчик тегу А, то будет ли он срабатывать по щелчку на другие элементы родителя? Не будет. Если в вашем случае обрабатывать события от ссылок, то будут ли обработаны "щелчки мимо"?
Кстати, не кажется ли вам, что в вашем подходе есть некая неоднозначность?

>Кстати, не кажется ли вам, что в вашем подходе есть некая неоднозначность?
нет... по моему все вполне логично...
если событие наследуется родителем (а вы сами это написали), то при клике по любому элементу предком которого является <li> будет запущена функция, которая сделает все что нужно и вернет false.
В случае если попали по ссылке - перехода не будет, если попали не по ссылке, то ничего не произойдет... == перехода не будет.... а это именно то, что мне и нужно.

Хорошо, я признаю, что скорее всего это не правильно, но это логично и работает, и те знания, которые есть у меня не позволяю написать мне все грамотно. Ну так может быть вы предложите правильный вариант решения?

Дано:
меню

<ul>   <li>     <a href='/page.php'>link</a>     <ul>       < a href='/page2.php'>link2</a>     </ul>   </li> </ul>

Задача:
При первом клике по элементу <li> и его потомкам показать вложенное меню (display: block)
при втором клике по тому же элементу перейти по ссылке, которая является потомком этого элемента. Работать все это должно только на планшетах, телефонах и прочих мобильных гаджетах.

Мой вариант решения в третьем посте в теме...

Под однозначностью я имел ввиду не события, а поведение меню. С событиями вы однозначно поступили не правильно, так как обрабатывать щелчки у родителя совсем не требуется. Вы используя jQuery, просто не видите (или не понимаете), что на самом деле происходит, то есть, что нужно выполнить скрипту, чтобы произвести нужное вам. Ну так если есть прямой путь, то зачем же действовать окольными путями?

Я имел ввиду другое. Я делаю первый щелчок - список раскрывается. Что я должен ожидать по второму щелчку - закрытие списка или переход на новую страницу? Я к тому, что мои ожидания могут и не оправдаться.

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

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

>Я имел ввиду другое. Я делаю первый щелчок - список раскрывается. Что я должен ожидать по второму щелчку - закрытие списка или переход на новую страницу? Я к тому, что мои ожидания могут и не оправдаться.

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

если вы знаете как правильно поступать в таких случая - подскажите... я другого варианта не вижу пока.
Дизайн сайта должен быть одинаковый на всех устройствах...
так что изменить структуру меню нельзя

А если не попал, то зачем обрабатывать? )

Есть уже инструменты позволяющие разрабатывать мобильные приложение, и для них используется jQuery mobile. На моб. устройствах работают жесты, почему не использовать их? Жестом раскрыли, ткнули, вошли. Я же не только должен видеть ваше меню, но оно должно и подсказывать мне, что я получу при каждом действии в нем. То есть, я должен сразу видеть - это элемент управления меню, а этот элемент приведет меня к новому содержанию.

Я не говорю, что делайте так я мне хочется, это дело вашего заказчика, я просто высказываю свое мнение как пользователя.

1) предположим что пункт меню 200px шириной, а в нем написано слово "дом".
по центру.... а приближать я не хочу, так как знаю что мне надо именно туда зайти, и сижу я с телефона. тыкнул пальцем - открылось меню... все же просто

2) я не знал про jQuery mobile

Этот плагин для приложений (а разработка их, это, например, PhoneGap). Но есть инструменты и для разработки адаптивного дизайна (не приложения), например, у Adobe на облачном сервисе таких приложений несколько (для конкретных задач).

Если сайт предусматривает действия с различными устройствами ввода/управления, то и его элементы управления должны подчинятся этому. Вот я и считаю, что лично меня такое меню мягко говоря введет в ступор, если я интуитивно не буду понимать, что меня ожидает.