javascript Vue mousemove仅在mousedown之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48152321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue mousemove only after mousedown
提问by Giacomo
How can I trigger a mousemove only if the element is clicked first? I'm trying to utilize this for an audio player timeline.
仅当首先单击元素时，如何才能触发鼠标移动？我正在尝试将其用于音频播放器时间线。
.player__time--bar(@mousedown="setNewCurrentPosition($event)")
.slider(role="slider" aria-valuemin="0" :aria-valuenow="currentPosition" :aria-valuemax="trackTotalDuration" aria-orientation="horizontal")
.player__time--bar-current-position(:style="{width: (100 / (trackTotalDuration / currentPosition)) + '%'}")
The method:
方法：
setNewCurrentPosition(e) {
let tag = e.target
// if the click is not on 'slider', grab div with class 'slider'
if (e.target.className === 'player__time--bar') tag = e.target.firstElementChild
else if (e.target.className === 'player__time--bar-current-position') tag = e.target.parentElement
const pos = tag.getBoundingClientRect()
const seekPos = (e.clientX - pos.left) / pos.width
this.currentPosition = parseInt(this.trackTotalDuration * seekPos)
// updates the time in the html
this.$refs.player.currentTime = this.currentPosition
},
回答by Roy J
You will want to have a mousedownlistener on your element that sets a variable to indicate dragging started. Put a listener on the window to catch mouseupanywhere and unset the variable.
您需要mousedown在元素上设置一个侦听器来设置一个变量以指示拖动开始。在窗口上放置一个侦听器以捕捉mouseup任何地方并取消设置变量。
You can put mousemoveon the element if you are only interested in dragging that happens inside the element. Otherwise you can put the mousemovelistener on windowso you catch it everywhere.
mousemove如果您只对元素内部发生的拖动感兴趣，则可以放置该元素。否则，您可以戴上mousemove监听器，window以便在任何地方都能捕捉到它。
new Vue({
el: '#app',
data: {
dragging: false,
x: 'no',
y: 'no'
},
methods: {
startDrag() {
this.dragging = true;
this.x = this.y = 0;
},
stopDrag() {
this.dragging = false;
this.x = this.y = 'no';
},
doDrag(event) {
if (this.dragging) {
this.x = event.clientX;
this.y = event.clientY;
}
}
},
mounted() {
window.addEventListener('mouseup', this.stopDrag);
}
});.dragstartzone {
background-color: red;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div class="dragstartzone" @mousedown="startDrag" @mousemove="doDrag">Start dragging here</div>
<div>X: {{x}}, Y: {{y}}</div>
</div>回答by Giacomo
I ended up using the code provided by Roy J, refactoring it a bit to fit my need. Here it is
我最终使用了 Roy J 提供的代码，对其进行了一些重构以满足我的需要。这里是
Template:
模板：
.player__time--bar(@mousedown="startDrag($event)" @mouseup="stopDrag($event)" @mousemove="doDrag($event)")
.slider(role="slider" aria-valuemin="0" :aria-valuenow="currentPosition" :aria-valuemax="trackTotalDuration" aria-orientation="horizontal")
.player__time--bar-current-position(:style="{width: (100 / (trackTotalDuration / currentPosition)) + '%'}")
Data:
数据：
data: () => ({
currentPosition: 0,
trackTotalDuration: 0,
dragging: false
}),
Methods:
方法：
startDrag() {
this.dragging = true
},
stopDrag(event) {
this.dragging = false
this.setNewCurrentPosition(event)
},
doDrag(event) {
if (this.dragging) this.setNewCurrentPosition(event)
},
setNewCurrentPosition(e) {
let tag = e.target
// if the click is not on 'slider', grab div with class 'slider'
if (e.target.className === 'player__time--bar') tag = e.target.firstElementChild
else if (e.target.className === 'player__time--bar-current-position') tag = e.target.parentElement
const pos = tag.getBoundingClientRect()
const seekPos = (e.clientX - pos.left) / pos.width
this.currentPosition = parseInt(this.trackTotalDuration * seekPos)
// updates the time in the html
this.$refs.player.currentTime = this.currentPosition
},
