jQuery - mouseleave on touch devices

How to make this script works for touchdevices?

$(".dropdown").hide();
$(".menu-item > a").on("mouseenter", function (e) {
    e.preventDefault();
    $(this).addClass("dropactive").next(".dropdown").show();
});
$(".menu-item").on("mouseleave touchleave", function () {
    $(this).children("a").removeClass("dropactive");
    $(this).children(".dropdown").hide();
});

It should hide .dropdown if user clicks outside .dropdown or if he scrolls the page. I thought that touchleave should do that but not.

Link to codepen http://ift.tt/1W2bvSH