触发上下文菜单事件时停止按钮失去焦点答案

【问题标题】：Stop button losing focus when contextmenu event fires触发上下文菜单事件时停止按钮失去焦点
【发布时间】：2021-06-10 11:48:34
【问题描述】：

我有一个 react 应用程序，它需要在按住按钮时播放一段内容，然后在释放按钮时停止。

我通过创建一个助手来处理检测长按来实现这一点，当onMouseDown 或onTouchStart 被触发然后它播放，当onMouseUp、onMouseLeave 或onTouchEnd 触发它停止。这一切都在桌面上完美运行。当我们看一下移动设备时，问题就出现了，移动设备将长按视为桌面上的右键单击，并尝试启动上下文菜单或突出显示元素/文本，为了解决这个问题，我添加了以下 css：

touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;

以及以下 Javascript：

window.oncontextmenu = function (event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

这在上下文菜单不显示的意义上按预期工作，但是被按住的按钮确实失去焦点，这意味着内容继续播放并且onMouseUp、onMouseLeave 或onTouchEnd 事件除非您再次点击按钮或屏幕上的某个位置，否则永远不会触发，我已经尝试过解决方案，例如在 onContextMenu 事件期间将焦点重新应用于按钮，但这也不起作用。

【问题讨论】：

请试试这个codepen codepen.io/p2pdops/pen/RwpEbxP我不确定这是否能解决问题，但它对我来说可以正常工作（在桌面和安卓模拟器中测试）

标签： javascript css reactjs dom-events

【解决方案1】：

当目标元素是button 时，移动用户代理不会将长按视为右键单击（因为按钮上没有与移动设备兼容的操作，而不仅仅是单击）。我建议您验证您正在谈论的按钮是实际的button。

const button  = document.querySelector('button');

button.addEventListener('mousedown', function() { this.classList.add('red') });
button.addEventListener('touchstart', function() { this.classList.add('red') });

button.addEventListener('mouseup', function() { this.classList.remove('red') });
button.addEventListener('mouseleave', function() { this.classList.remove('red') });
button.addEventListener('touchend', function() { this.classList.remove('red') });

.red {
  background-color: red;
}

&lt;a href="#"&gt;This link does trigger a context menu on a long touch&lt;/a&gt; &lt;button&gt;This button doesn’t&lt;/button&gt;

如果这不能回答您的问题，请添加实际的 HTML 代码。

【讨论】：

嘿 Guerric，您是对的，但是长按移动用户代理仍会启动上下文菜单，您在移动设备上启动该菜单的方式实际上可能不会触发左键单击，但您仍然最终得到一个上下文菜单，这就是我试图传达的内容
我仍然会奖励你赏金，因为你是唯一真正试图回答这个问题的人，但我不会接受这个答案，因为事实证明我的问题的答案是什么不同

【解决方案2】：

当在桌面上使用它时，点击我的鼠标会触发 mousedown 事件，这是预期的，当在移动设备上使用它时，它会同时触发两个事件，这意味着当它触发 touchend 时，它也会触发 mouseleave 或 mouseup，我不确定为什么会这样，但为了解决我的问题，我只是有条件地添加了事件监听器，所以对于移动设备，我现在只为 touchstart、touchend 和 touchcancel 添加事件监听器。

【讨论】：