Некорректная работа меню по тапу
 

Здравствуйте. Подскажите пожалуйста. Есть выпадающее меню:

<ul class="wrap middleMenu">
	<li class="menu__list first">
	<a class="touch">Каталог</a>
		<ul class="middleMenu__drop">
			<li><a href="#">Туфли</a></li>
			<li><a href="#">Босоножки</a></li>
			<li><a href="#">Кеды</a></li>
			<li><a href="#">Кросcовки</a></li>

		</ul>
	</li>
	<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
	<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
	<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>

$(function (event) {
    $('.menu__list').on('mouseleave mouseenter touchstart', function () {

        $('.middleMenu__drop').slideToggle(50);


    })
})

При работе с мышкой все работает вроде как корректно, но вот при тапах с тачскринов происходит что-то неясное, при первом тапе меню открывается и сразу же закрывается, после этого по тапу меню открывается, но при клике по его пунктам я попадаю по тем ссылкам которые находятся под этим самым выпадающим листом, то есть оно как будто бы прозрачно насквозь для тапа, хотя для мышки переходы по ссылкам также происходят корректно, возможно первая проблема и тянет за собой вторую, а возможно дело в стилях. Хотелось бы решить первый момент, я только начал изучать JS и до JQ еще не дошел, возможно тут нужно где-то вписать event.preventDefault() ? Пробовал вписывать после

$('.middleMenu__drop').slideToggle(50);

но ничего не поменялось, подскажите пожалуйста, куда копать?

Tipylja, возможно эта статейка тебе поможет...
http://www.manhunter.ru/webmaster/80...ascript.ht ml

Спасибо, почитал, но не помогло.
Я изменил события таким образом

click mouseenter

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

mouseleave

А на тачскрине опять беда, первый тап - меню разворачивается и тут же сворачивается, при втором нажатии все работает корректно, то есть меню работает корректно только после первого нажатия. То есть событие clik решило вопрос с тем, что по пунктам меню нельзя было переходить(описывал выше поведение). НО по всей видимости при первом тапе срабатывают два события - click - разворачивает меню по тапу, а когда палец отрывается от экрана получается срабатывает событие mouseleave - во всяком случае я так думаю, но я еще мало чего понимаю в этом деле..и почему тогда такое поведение именно при первом тапе, при последующих все работает корректно..

Tipylja, я не особо спец по тачскринам... :(

Проверьте на разных браузерах и устройствах - не уверен, что способ универсальный.

<ul class="wrap middleMenu">
    <li class="menu__list first">
    <a class="touch">Каталог</a>
        <ul class="middleMenu__drop" style="display:none;">
            <li><a href="#">Туфли</a></li>
            <li><a href="#">Босоножки</a></li>
            <li><a href="#">Кеды</a></li>
            <li><a href="#">Кросcовки</a></li>
        </ul>
    </li>
    <li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
    <li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
    <li class="last"><a href="#">НОВИНКИ</a></li>
</ul>

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $('.menu__list').on('mouseleave mouseenter click', function (e) {
if( e.relatedTarget === null && e.type !== 'click' ) return;
$('.middleMenu__drop').slideToggle(50);
    });
</script>

Все работает. Спасибо вам!

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

Используйте явные .slideDown(), .slideUp() - каждый на соответствующее событие.