Click and Double Click in JavaScript

Spent a few hours on a simple task: create different handlers for ‘click’ and ‘double click’ events on the same element, onclick handler should not be executed if a double click event is raised.

I hope, there is a better solution but I didn’t find it. I leave it here in case if somebody helps me with it:

<html>
<body>
    <a href="#" id="clickMe">Click Me</a>

    <script type="text/javascript">
        /* click or double click */
        var timeout = null;
        let link = document.getElementById('clickMe')
        link.addEventListener('click', (e) => {
            if (timeout === null){
                timeout = setTimeout(() => {
                    timeout = null
                    alert('click')
                    e.preventDefault();
                }, 300);
            }
        })

        link.addEventListener('dblclick', (e) => {
            clearTimeout(timeout)
            timeout = null;
            alert('double click')
            e.preventDefault();
        })
    </script>
</body>
</html>

I use pure JavaScript to not depend on any framework in this example.

Tags

.net .net-framework .net-framework-3.5 agile ajax ajax-control-toolkit ampq ansible apache asp.net asp.net-mvc automation axum babel bash benchmark blog blog-engine bootstrap buildout c# cache centos chrome ci cinder ckan cli cloud code-review codeplex community config debugger deface dependencies development-environment devices devstack devtime disks django dlr dns docker dockerimage dos easy_install elmah encoding environment-variables error event events everything-as-a-code exception exceptions fabrik firefox flask foreach forms fstab gae gcc gerrit git github go google google-app-engine grep hack hacked hardware headless horizon hound html hugo iaas ienumerable iis internet iptables iron-python ironic iscsi java-script javascript jenkins jquery js jsx kharkivpy kiss kombu kvm kyiv lettuce libvirt linux lio loci logging loopback losetup lvm mac-os macos mercurial microsoft microsoft-sync-framework mobile mono ms-office msbuild networking news nginx npm npx offtopic oop open-source open-xml opensource openstack openvswitch os packages paraller-development patterns-practices performance php pika pip plugins pnp podcast popup postgresql profiler project protocols proxy pycamp pycharm pycon pykyiv pylint pypi python python-3 qcow quantum qumy rabbitmq rar react reactjs refactoring rfc rhel search-engine security selenium server shell silverlight socket software-engineering source-control sourcegear-vault sources sql sql-server sql-server-express sqlalchemy ssh static-site sublimetext svg tests tgt tipfy tornado typescript uapycon ui uneta unit-tests upgrades usability vim virtualenv visual-studio vitrage vm vue.js vuejs web-development web-server web-service web_root webpack webroot windows windows-live word-press x32 x64 xcode xml xss xvfb интернет-магазин книги


Archives

2019 (73)
2018 (2)
2017 (3)
2016 (2)
2015 (3)
2014 (5)
2013 (17)
2012 (22)
2011 (35)
2010 (25)
2009 (35)
2008 (32)
2007 (2)