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

Question

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

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

这是显示问题的小 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

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

时关闭

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

感谢您的帮助:)

Answer 1

您可以通过在您的 <v-dialog:

定义 noClickAnimation 属性以便您可以保留反应性引用。

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

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

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

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

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

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

How to filter out mouse click release events?

javascript

events

dom-events

vue.js

vuetify.js