如何过滤掉鼠标点击释放事件？答案

【问题标题】：How to filter out mouse click release events?如何过滤掉鼠标点击释放事件？
【发布时间】：2020-10-05 15:46:40
【问题描述】：

我有一个 Vue/Vuetify 对话框，在对话框外单击会关闭（如预期的那样）

问题：在该对话框中，我有一个文本字段。如果我现在选择内容，并且（意外）在对话框外释放鼠标，它会关闭。我想成百上千的用户会遇到这个问题

这是一个显示问题的小 gif： https://gifyu.com/image/64XB

我为 click:outside 编写了一个处理程序并记录了该事件，它是：

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 398
clientY: 358
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 292
layerY: 4
metaKey: false
movementX: 0
movementY: 0
offsetX: 292
offsetY: 4
pageX: 398
pageY: 358
path: (19) [label.v-label.theme--light, div.v-input__slot, div.v-input__control, div.v-input.v-input--is-label-active.v-input--is-dirty.theme--light.v-input--selection-controls.v-i…, div.card-content.grid-x, div.v-card.v-card--flat.v-sheet.theme--light, div.no-padding-horizontal.col-sm-12.col-md-12.col-lg-12.col-xl-12.col, div.row, div.col, div.row.page-content, div.container, div.v-content__wrap, main.v-content, div.v-application--wrap, div#app.v-application.v-application--is-ltr.theme--light.page-xl.section-exchange, body, html.sr, document, Window]
relatedTarget: null
returnValue: false
screenX: 398
screenY: 430
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: label.v-label.theme--light
target: label.v-label.theme--light
timeStamp: 181260.08999999613
toElement: label.v-label.theme--light
type: "click"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 398
y: 358
__proto__: MouseEvent

换句话说，它是一个“点击”事件。当然，我希望它在真正的实际点击时关闭。但我不希望它在鼠标释放

时关闭

有没有办法检测到这个特定的事件？

感谢您的帮助:)

【问题讨论】：

你的意思是“鼠标向上”吗？
可能，我不知道。就像我说的，它被注册为“点击”
你可以将它绑定到 mousedown 而不是点击
stackoverflow.com/questions/14805225/… 可能会有所帮助。
@TKoL 好主意！但它似乎不起作用。我将@click:outside 更改为@mousedown:outside，但行为相同。也许这是 vuetify 固有的东西？

标签： javascript vue.js events dom-events vuetify.js

【解决方案1】：

您可以通过在<v-dialog 中处理您正在使用的容器（可能是v-card？）中的mouseenter、mousedown 和mouseup 事件来实现此功能：

定义 noClickAnimation 属性，以便您可以保留响应式引用。

将鼠标事件绑定到容器元素：

<v-card ... 
  @mouseenter="noClickAnimation = false" 
  @mousedown="noClickAnimation = true" 
  @mouseup="noClickAnimation = false"

将:persistent="noClickAnimation" 添加到您的对话框中。

现在，当您按下鼠标、向外拖动并释放时，它不会关闭。 @mouseenter 会重置所有内容，以便他们可以像往常一样通过单击外部来适当地关闭它。

Here is a codepen.io 说明了这种行为。

【讨论】：