javascript - 如何检测 Internet Explorer 10+ 中的点击次数

Question

我需要知道如何检测 HTML 元素的点击次数。对于 Firefox 和 Chrome，我使用“event”对象并检查其“detail”属性。使用“mousedown”处理程序，我只想在第一次单击时在元素上启动“拖动”(使用 CSS 在屏幕上移动它):

如果(event.detail>1)返回；

但是 Internet Exploder 11(我假设 10+ 也是如此) 事件.detail===5 第一次点击时。 IE9 返回“正确”值 1。

我唯一能想到的是使用“setInterval()”定期(每0.5秒左右)将“全局”值设置为=0，然后在每次“鼠标按下”时增加该值并使用它计数而不是“event.detail”。

我认为这很荒谬。

您可以在以下位置看到此问题(直到我修复它):

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

有问题的实际 JavaScript 代码位于文件中(最末尾):

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

单击左侧的输入框(即“尝试此处”)后，您应该能够通过其 handle 在屏幕上“拖动”“选择器面板”。使用真正的浏览器没问题，尽管 IE9 的代码库已经被 maxxed 了(是的，它会抛出堆栈溢出错误!)，但它会(或者在上次使用“FD-sliders”的更新实现之前)开始了堆栈溢出问题)允许拖动面板。 IE10+ 仅“突出显示”(选择)光标下的文本，不会拖动，同样是因为“错误”的“event.detail”值。公平地说，我在 Microsoft 开发者网络页面上找不到任何内容说明 event.detail 规范实际上是什么(只是“提供有关该事件的更多信息...”)，并且指向 W3C 页面的链接似乎没有“event.detail”属性的规范。

我在这里遗漏了什么吗？

从文件中提取代码:

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

只需记录 mousedown 处理程序被调用的次数即可:

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