Хотите выполнить различную задачу по событию мыши и щелчка

Question

В JavaScriptmousedown событие, за которым следует mouseup и click. поэтому в событии click три из этого события выполняются. Но в моей задаче я хочу сделать другую задачу для mousedown и click. если кто-либо нажмите и удерживайте кнопку мыши, а затем отобразится список, и событие click не будет выполнено. , когда просто щелкните, то задача для щелчка будет выполнена. Он похож на функциональность задней клавиши хром. кому помочь. Заранее спасибо.

Answer 1

Для оба события, работающего в одном селекторе:

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 
}); 

Answer 2

Вы можете сделать это следующим образом:

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>

Answer 3

MouseDown doens't генерируют несколько событий для пуха, поэтому здесь я использовал setInterval, чтобы проверить, если мышь по-прежнему вниз.

Только что сделал быстрый мод, забыл, что мышь на элементе не срабатывает, если вы вытаскиваете из элемента. Поэтому здесь я привязываю событие к окну.

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>