Fixing Click Event Issue on Mobile Web UI

Photo by Daniel Korpai on Unsplash

As mobile devices are more accessible for browsing and accessing the web, builders of old and new websites and web apps would as much as possible want to make their UI design responsive. But more than aiming for a responsive user interface, it is as well important to have the same satisfactory experience with using larger resolutions. However, one pitfall in adapting a nice user experience on mobile devices is handling — the click event.

Solving in VueJS Framework

I had encountered this issue, thence this article, and I observed that it occurs to elements that one would not expect a click event would happen or when the click event is not attached to an anchor tag. Also, I come to understand that since it’ll be browsed on touch-based interfaces, it would expect to handle another type of event, which is — the tap/touch event and since the issue is happening in a VueJS framework it was easy to utilize a JS package — vue2-touch-events. The fix is just as simple as attaching the tap event to the element as such:

import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

and on the html part

<span v-touch:tap="touchHandler">Tap Me</span>

jQuery Specific Issue

If you are having trouble with an old website where jQuery is the prevalent JS library, one fine solution is using .on function instead of directly using the .click event.

from

$(document).ready(function() {
$("div.clickable").click(function(){
alert('Clicked');
});
});

to

$(document).ready(function() {
$("div.clickable").on('click', function() {
alert('Clicked');
});
});

You would also be glad to know that jQuery was not left behind on catering touch-based cases. It has the tap event among other mobile-based events. You can learn more about it at https://api.jquerymobile.com/tap/

Touch Event for Later Browsers

Touch event also becomes available for later browser as soon as mobile devices are being used by the masses. I think this becomes a major support for developers who opted to use native JS.

<div id="tap-able">Tap Here!!</div>

attaching the event goes like this —

function load() {
var el = document.getElementById("tap-able");
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
}

document.addEventListener("DOMContentLoaded", load);
// add handle functions ...

See how you can utilized it more at https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Now, if you have the liberty to change element usage, such as changing divto an anchor tag, please do so first and see it that works. I think that is a more elegant way of fixing the issue.

--

--

--

Programmer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is the difference between a NodeList and an HTMLCollection

Eyetemize Part 1

Host Node Express Application in Apache WebServer in Ubuntu Server

How create Stock Screener on Node JS? EP1

How to set up ngrok to work with create-react-app that runs under HTTPS=true flag

What’s Best For Your Fronted Development Requirement — Angular 2 vs. Angular 4

Updating MY State (because State objects are mutable)

Using a binary search to determine if an element exists in an array

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dixie Atay

Dixie Atay

Programmer

More from Medium

Vue Storefront is currently the most developer-friendly front-end option for #eCommerce projects.

Tailwind Devtools Inspector — How to quickly edit tailwind classes and apply tailwind templates —…

Step-by-step: How to Create a Vue Multi-Language App with Vue-i18n

20 Tips to make your WordPress site more Secure