jQuery：单击和拖动时触摸的不同事件

Question

考虑以下HTML结构：

<div class="parent">
    <div class="image"></div>
    <div class="text">
        <h1><a href="link">LINK TEXT</a></h1>
    </div>
</div>

和基本CSS

.text {
    opacity: 0;
    }
.show_title text {
    opacity: 1;
    }

文本开始隐藏。目标是使用jQuery检测移动设备中的用户何时触摸“父级”，然后该父级将在元素中添加一个CSS类并显示隐藏的标题。当用户停止触摸时，该类将被删除，文本再次被隐藏。我可以使用以下JS来实现这一点：

jQuery('.parent').on('touchstart touchend', function () {
    jQuery(this).toggleClass('show_title');
});

但是，这会断开“文本” div内的链接。我需要一种解决方案，如果触摸并拖动“父级”，则显示文本，仅此而已；但是，如果有人触摸但没有拖动-即“触摸-点击”-则文本将出现并且将跟随链接。我该怎么办？