How do I detect the number of clicks in Internet Explorer 10+

Question

I need to know how to detect the number of clicks on an HTML element. With Firefox and Chrome, I use the "event" object and check its "detail" property. With a "mousedown" handler, I only want to initiate a "drag" on an element (move it around the screen using CSS) on the FIRST click:

if (event.detail>1) return;

But Internet Exploder 11 (I assume the same for 10+) the event.detail===5 on the first click. IE9 returns the "proper" value of 1.

The only thing I can think of is to use "setInterval()" to periodically (every .5 seconds or so) set a "global" value to =0, then increment that value on each "mousedown" and use that count instead of the "event.detail".

Ridiculous, methinks.

You can see this problem (until I fix it) at:

http://softmoon-webware.com/MasterColorPicker_instructions.php

The actual javascript code in question is in the file (the the very end):

http://softmoon-webware.com/color-pickers/SoftMoon-WebWare/MasterColorPicker2.js

After clicking on the input box on the left (that says try here), you should be able to "drag" the "picker panels" by their handles around the screen. No problem using a real browser, and even though IE9 is about maxxed out with the codebase (yes, it throws stack-overflow errors!) it will (or did before the last update that worked with the "FD-sliders" was implemented that started the stack overflow problems) allow dragging the panels. IE10+ only "highlights" (selects) the text under the curser, won't drag, again because of the "wrong" "event.detail" value. To be fair, nothing I can find on the Microsoft Developer Network pages says what the event.detail specs actually are (just "gives further info about the event..."), and the link to W3C pages don't seem to have specs for the "event.detail" property either.

Am I missing something here?

code extract from file:

for (var i=0, handle, panels=MasterColorPicker.panels;  i<panels.length;  i++)  {
    if (panels[i]===MasterColorPicker.mainPanel)  continue;
    if (panels[i].id==='MasterColorPicker_options')  {
        handle=panels[i].getElementsByTagName('header')[0];             // ↓ ↓ for drag, the first panel must be the largest and contain the other(s) in its margin
        UniDOM.addEventHandler(handle, 'onmousedown', dragPanel, false, [MasterColorPicker.mainPanel, panels[i]]);
        UniDOM.addEventHandler(handle, 'onmouseup', returnPanelsOn3, false, [MasterColorPicker.mainPanel, panels[i]]);  }
    else  {
        handle=panels[i].getElementsByTagName('h2')[0].getElementsByTagName('span')[0];
        UniDOM.addEventHandler(handle, 'onmousedown', dragPanel, false, [panels[i]]);
        UniDOM.addEventHandler(handle, 'onmouseup', returnPanelsOn3, false, [panels[i]]);  }
    UniDOM.addEventHandler(handle, 'oncontextmenu', abortContextMenu);  }
UniDOM.addEventHandler(document.getElementById("MasterColorPicker_returnPanelsOn3"), 'onmouseup', returnPanelsOn3, false, panels);
function dragPanel(event, stickyPanels)  { console.log("IE sucks: detail: "+event.detail);
    event.stopPropagation();
    event.preventDefault();
    if (event.detail>1  ||  !MasterColorPicker.enablePanelDrag)  return;
    var stick=(event.shiftKey || event.button===2) && MasterColorPicker.enableStickyPanels && (UniDOM.MS_exploder!==9),
            ttcn= (stick ? 'MCP_thumbtack' : ""),
            CSS=getComputedStyle(stickyPanels[0], null),
            mOff= (CSS.position==='fixed') ?
                    {x: (document.body.offsetWidth-event.clientX)-parseInt(CSS.right),  y: event.clientY-parseInt(CSS.top)}
                : UniDOM.getMouseOffset(stickyPanels[0], event),
        dragHandle=event.currentTarget,
            move=UniDOM.addEventHandler(document.body, 'onmousemove', function(event)  {
                var CSS=getComputedStyle(stickyPanels[0], null);
                if (CSS.position==='fixed')
                var b={w: document.body.offsetWidth, h: document.documentElement.clientHeight || window.innerHeight, x: 0, y: 0},
                        y=(event.clientY - mOff.y),
                        x=((b.w-event.clientX) - mOff.x);
                else
                var b=UniDOM.getElementOffset(stickyPanels[0].offsetParent, MasterColorPicker.dragBounder),
                    b={y: b.y, x: b.x, w: MasterColorPicker.dragBounder.offsetWidth, h: MasterColorPicker.dragBounder.offsetHeight},
                    m=UniDOM.getMouseOffset(stickyPanels[0].offsetParent, event),
                        y=m.y - (parseInt(CSS.marginTop) + mOff.y),
                        x=(b.w-m.x) - (stickyPanels[0].offsetWidth-mOff.x) + parseInt(CSS.marginRight);
                y= (y<-b.y) ?  (-b.y)  :  ( (y>(m=b.h-(stickyPanels[0].offsetHeight+parseInt(CSS.marginTop)+parseInt(CSS.marginBottom)+b.y))) ? m : y );
                x= (x<-b.x) ?  (-b.x)  :  ( (x>(m=b.w-(stickyPanels[0].offsetWidth+parseInt(CSS.marginLeft)+parseInt(CSS.marginRight)+b.x))) ? m : x );
                for (i=0;  i<stickyPanels.length;  i++)  {
                    stickyPanels[i].style.top= y + 'px';
                    stickyPanels[i].style.right= x + 'px';  }
                event.stopPropagation();
                event.preventDefault();  }
            , true),
            blockMenu=UniDOM.addEventHandler(document.body, 'oncontextmenu', abortContextMenu, true),
            drop=UniDOM.addEventHandler(document.body, 'onmouseup', function(event)  {
                move.onmousemove.remove();  blockMenu.oncontextmenu.remove();  drop.onmouseup.remove();
                event.stopPropagation();
                event.preventDefault();
              for (var i=0;  i<stickyPanels.length;  i++)  {UniDOM.removeClass(stickyPanels[i], ['dragging', ttcn]);}
                UniDOM.removeClass(document.body, ['MCP_drag', ttcn]);
                if (stick) dragHandle.removeChild(MasterColorPicker.thumbtackImage);
                try {MasterColorPicker.dataTarget.focus();} catch(e) {}  }
            , true);
  for (var i=0;  i<stickyPanels.length;  i++)  {
      UniDOM.addClass(stickyPanels[i], ['dragging', ttcn]);
        MasterColorPicker.setTopPanel(stickyPanels[i]);  }
    if (stick)  {
        mOff.x=stickyPanels[0].offsetWidth-mOff.x;
        if (CSS.position==='fixed')  {
            mOff.y= -(parseInt(CSS.marginTop)-mOff.y);
            var currentCN='floating', newCN='scrollable';  }
        else  {
            mOff.y += parseInt(CSS.marginTop);
            var currentCN='scrollable', newCN='floating';  }
      while (--i>=0)  {UniDOM.swapOutClass(stickyPanels[i], currentCN, newCN);}
      dragHandle.appendChild(MasterColorPicker.thumbtackImage);
      move.onmousemove.wrapper(event);  }
    UniDOM.addClass(document.body, ['MCP_drag', ttcn]);  }
function returnPanelsOn3(event, stickyPanels)  {
    event.stopPropagation();
    event.preventDefault();
    if (event.detail!==3  ||  event.button!==0)  return;
    MasterColorPicker.returnPanelsHome(stickyPanels);  }
function abortContextMenu(event) {event.preventDefault();  event.stopPropagation();}
MasterColorPicker.returnPanelsHome=function(stickyPanels)  {
  for (var i=0;  i<stickyPanels.length;  i++)  {
        stickyPanels[i].style.top= "";
        stickyPanels[i].style.right= "";
        UniDOM.removeClass(stickyPanels[i], ['scrollable', 'floating']);  }  }

Answer 1

Just keep a count of how many times your mousedown handler has been called:

var clickCount = 0;
$('#myElement').on('mousedown', function(){
    clickCount++;
    if (clickCount > 1)
        return;
    [ ... ]
});