[Tipylja]

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

<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);

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