How to bind click and double click events on the same element in CKeditor

Question

I am having an issue with CKeditor click event and double-click events. Currently, I am binding click event and double click event to the CKEditor dom.

    editor.on('doubleclick', function (evt) {
        console.log("doubleclicked");
        //Some ajax calls
    }, null, null, 999 );
    editor.on('click', function (evt) {
        console.log("clicked");
        //Some ajax calls
    }, null, null);

An issue with above code is, it fires click event first as well when I double-click the element. Both codes execute when I double click on the element.

Any solution for CKEditor for above case?

My question is related to CKeditor plugin. So I have to bind proper (built-in) events for click and double click.

[check the link for help](https://stackoverflow.com/questions/5471291/javascript-with-jquery-click-and-double-click-on-same-element-different-effect/10624337) — Alive to die - Anant, Feb 15 '18 at 07:03
Possible duplicate of [Jquery bind double click and single click separately](https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately) — GreyRoofPigeon, Feb 15 '18 at 07:05
I already have tried above solution. Though it works fine, management won't approve such code as it seems like a patch. So I have to find proper event binding which CKeditor provides. — Maharshi, Feb 15 '18 at 07:08

Abdullah Shoaib · Answer 1 · 2018-02-15T07:30:30.513

Try this. It will work. For CKeditor you can replace editor.on('dblclick', function (evt) { line with this line editor.on('doubleclick', function (evt) {

Check this link.

    function singleClick(e) {
       console.log('single click');
   }

   function doubleClick(e) {
       console.log('double click');
   }

   editor.on('dblclick', function (evt) {
        $(this).data('double', 2);
        doubleClick.call(this, evt);
        //Some ajax calls
    }, null, null, 999 );
    editor.on('click', function (evt) {
        var that = this;
        setTimeout(function() {
            var dblclick = parseInt($(that).data('double'), 10);
            if (dblclick > 0) {
                $(that).data('double', dblclick-1);
            } else {
                singleClick.call(that, evt);
            }
        }, 300);
        //Some ajax calls
    }, null, null);

How to bind click and double click events on the same element in CKeditor

1 Answers1