Блог

Допустим, я mousedown создаю пустую область на странице с помощью правой кнопки, затем перемещаю курсор из документа, продолжая нажимать кнопку, а затем, наконец, отпускаю ее. Я хочу предотвратить mouseup действие, потому что оно сработало за пределами документа.

Я мог бы сравнить координаты события с пределами окна, но есть вероятность, что у пользователя есть приложение, закрепленное («всегда сверху») над частью окна браузера, поэтому нажатие кнопки над ним также находится снаружи, но координаты не скажут.

Я думал, что смогу решить эту проблему с помощью этого:

 document.addEventListener('mouseup', (e) => {
 if (!document.documentElement.matches(':hover')) {
   e.preventDefault();
   e.stopPropagation();
 }
}, false);
 

Но document.documentElement.matches(':hover') это все равно правда! Я не знал :hover , что изменение состояния ожидает окончания щелчка, мне это кажется неправильным.

Я могу использовать setTimeout задержку document.documentElement.matches(':hover') , но мне интересно, есть ли более подходящий способ, потому что короткая задержка может не сработать, если браузер занят, в то время как более длительная может не обеспечить наилучшего UX.

Я тоже пробовал mouseover mouseout и тому подобное , но ничего не вышло.

Я не уверен, но вы можете попробовать использовать, возможно, вам придется отредактировать его и все такое, но это может сработать

 document.addEventListener('mouseup', (e) => {
 document.querySelector('*:hover').forEach((el) => {
  if(el === document) {
    e.preventDefault();
    e.stopPropagation();
    //rest of the stuff you want to do...
   } else {
    //other the stuff you want to do if mouse in document...
   }
 });
}, false);