on "tap, click" event firing twice. how to avoid it?

Question

I'm trying to make an image with area tags where I can click on each area and show an alert.

With both "tap & click" included, I can't seem to figure out how to avoid firing the event twice on desktop mode using a mouse click.

$(document).ready(function(e) {
    $('img[usemap]').something();

    $('area').on('tap click', function() {
        alert($(this).attr('alt'));
    });
});

I've searched several ways such as separating the events using Boolean, but they didn't really work as I'm really bad at javascript...

Please help me figure this out. Thank you very much!

Answer 1

You can try testing for window.ontouchstart and only binding the relevant event

$(document).ready(function(e) {
    $('img[usemap]').something();

    function clickArea(){
        alert($(this).attr('alt'));
    }

    if(typeof window.ontouchstart === 'undefined'){
        $('area').on('click', clickArea);
    } else{
        $('area').on('touchstart', clickArea);
    }
});