想要在mousedown上執行不同的任務並單擊事件

在JavaScriptmousedown事件後跟mouseup和click。所以在點擊事件三這個事件執行。但在我的任務中，我想爲mousedown和click執行不同的任務。如果有人按住鼠標一段時間，然後列表將顯示並單擊事件將不會執行。只需單擊，即可執行點擊任務。它就像鉻後退箭頭功能一樣。任何人都可以幫忙。提前致謝。想要在mousedown上執行不同的任務並單擊事件

來源

2016-11-07 Shahadat Atom

鼠標按下+鼠標鬆開=一個完整的點擊。所以如果mousedown事件被觸發，那麼會自動發生mouseup事件。 – Prasath

是的，我知道，我想爲mousedown持續一段時間，然後點擊不同的任務。 –

您是否爲'click'事件添加了事件處理程序？ –

對於這兩個事件在同一個選擇的工作：

var pressTimer, longClick; 

function mouseUpCheck() { 
    clearTimeout(pressTimer); 
    window.removeEventListener('mouseup', mouseUpCheck); 
} 

document.querySelector('.mySelector').addEventListener('mousedown', function(){ 
    window.addEventListener('mouseup', mouseUpCheck); 
    pressTimer = window.setTimeout(function() { 
    longClick = true; 
    //code for longclick 
    },2000); 
}); 

document.querySelector('.mySelector').addEventListener('click', function(event) { 
    if (longClick) { 
    longClick = false; 
    event.stopPropagation(); 
    event.preventDefault(); 

    return; 
    } 

    // code for simple click 
});

來源

2016-11-08 06:59:45

你可以這樣說：

var pressTimer, longClick; 
 

 
function mouseUpCheck() { 
 
    clearTimeout(pressTimer); 
 
    window.removeEventListener('mouseup', mouseUpCheck); 
 
} 
 

 
document.querySelector('.link').addEventListener('mousedown', function(){ 
 
    window.addEventListener('mouseup', mouseUpCheck); 
 
    pressTimer = window.setTimeout(function() { longClick = true; alert('long click'); },2000); 
 
}); 
 

 
document.querySelector('.link').addEventListener('click', function() { 
 
    if (longClick) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    longClick = false; 
 
    return; 
 
    } 
 

 
    alert('click'); 
 
});

<a class="link">click me</a>

來源

2016-11-07 12:16:24

這與我最初的問題有相同的問題，如果將鼠標從初始控件移開，忘記了mouseup事件可能不會觸發。要在你的代碼片段中看到這個，..如果你將超時時間增加到2秒，控制權就會被釋放，立即將鼠標移出控制器，放開鼠標並等待。即使你從未保持2秒鐘，你也會得到'提醒'。說到這一點，我認爲setTimeout的優點是至少像這樣的錯誤不會泄漏，我的setInterval泄漏在這個實例中。在窗口對象上添加鼠標，這應該是可接受的答案。 – Keith

感謝，更新 –

我試過這個，但是當我點擊第一個它的工作，但是當我點擊了很長時間後點擊它不工作點擊 –

MOUSEDOWN好好嘗試一下產生向下多個事件，所以在這裏我用一個的setInterval繼續檢查，如果鼠標仍然下。

剛剛完成了一個快速修改，忘記了如果你將鼠標移出元素，元素上的mouseup不會被觸發。所以我在這裏將事件附加到窗口上。

var d = document.querySelector('div'); 
 
var dtime; 
 
var i; 
 

 

 
d.onmousedown = function() { 
 
    window.addEventListener('mouseup', mouseUpCheck); 
 
    dtime = new Date(); 
 
    i = setInterval(function() { 
 
    if (dtime) { 
 
     var t = new Date(); 
 
     if (t.getTime() - dtime.getTime() >= 2000) { 
 
     dtime = null; //stop now.. 
 
     console.log('2 second mousedown'); 
 
     } 
 
    } 
 
    }, 50); 
 
} 
 
function mouseUpCheck() { 
 
    dtime = null; 
 
    window.removeEventListener('mouseup', mouseUpCheck); 
 
    clearInterval(i); 
 
}

<div>Click Hold for 2 seconds</div>

來源

2016-11-07 12:22:56 Keith

想要在mousedown上執行不同的任務並單擊事件

回答

相關問題