[英]How do I detect the number of clicks in Internet Explorer 10+
我需要知道如何檢測HTML元素上的點擊次數。 對於Firefox和Chrome,我使用“事件”對象並檢查其“詳細信息”屬性。 使用“ mousedown”處理程序,我只想在第一次單擊時在元素上啟動“拖動”(使用CSS在屏幕上將其移動):
如果(event.detail> 1)返回;
但是Internet Exploder 11(我對10+假定相同)在第一次單擊時為event.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
單擊左側的輸入框(即在此處嘗試)后,您應該能夠通過屏幕周圍的手柄“拖動”“選擇器面板”。 使用真正的瀏覽器沒問題,即使IE9的代碼庫已達到極限(是的,它也會引發堆棧溢出錯誤!),它將(或者在實現與“ FD滑塊”一起使用的最后一次更新之前完成)引發了堆棧溢出問題),允許拖動面板。 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']); } }
只需記錄一下您的mousedown處理程序被調用的次數即可:
var clickCount = 0;
$('#myElement').on('mousedown', function(){
clickCount++;
if (clickCount > 1)
return;
[ ... ]
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.