javascript - 响应式设计和 .click() 事件监听器的问题

Question

所以我拥有的是一个完整的 HTML/CSS 网站，我没有设计它，我只是继承了它。我目前面临的问题是，特别是在一个页面上，当在手机/平板电脑上查看时，几乎变得过于敏感。我的意思是，实际上在页面上滚动变得非常困难，因为有许多小“图 block ”都连接到 .click()听众，通过在手机/平板电脑上滚动来触发。

我真的在寻找最佳实践或任何人可能有的关于如何最好地处理这个问题的想法。在搜索谷歌之后，我没有成功找到任何对我有值(value)的东西。

我有一些想法，但尚未实现

• 添加延迟，以便用户在运行 click() 中的代码之前必须实际点击并按住一两秒。事件监听器
• 通过媒体查询，大幅减小 click() 所需要的元素大小监听器绑定(bind)到

无论如何，这里有一个 HTML 示例以及输出到浏览器时最终产品的屏幕截图

HTML -- 有很多这样的小<a>连续的 block 与响应式 CSS 堆栈

<a href="#" class="brand MerchantTile" data-merchantid="2">
    <span class="image-holder">
        <img src="../images/Macys.png" />
    </span>
    <p>Shop and earn with</p>
    <p>Macys</p>
</a>

屏幕截图

Answer 1

从这里开始:Understanding touch events尝试将点击事件迁移到触摸事件以防止这种情况发生。