Issue with Responsive Design and .click() event listeners

Question

So what I have is a full HTML / CSS site that I did not design, I've just inherited it. The issue that I'm facing at the moment is that on one page in particular, when viewed on a phone / tablet, almost becomes too sensitive. What I mean by that is that it actually becomes very difficult to scroll around on the page due to the fact that there are many little "tiles" that are all wired to up for .click() listeners, which are being triggered by scrolling on the phones / tablets.

I am really looking for best practices or any ideas anyone might have as how to best handle this. After scouring google, I have been unsuccesful in finding anything of value to me.

A few ideas I had, but have yet to implement are to

• Add a delay so that a person must actually tap and hold for a second or two before running the code in the click() event listener
• With media queries, drastically reduce the size of the element that the click() listener is bound to

Anyways, here is a sample of the HTML and a screenshot of what the final product looks like when output to a browser

HTML -- There are many of these little <a> blocks in succession that stack with the responsive 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>

Screenshot

Answer 1

Start here: Understanding touch events to try migrating the on click events to on touch events to prevent this from happening.