Vuejs2 使用线绘制拖动后，鼠标悬停检测未按预期工作

我目前正在使用以下库：

该项目基本上是进行以下测试，即通过画一条线将文本与图像连接起来

对此，我有以下代码：

<v-stage 
            :config="configKonva" 
            ref="stage" 
            @mousemove="moviendoLinea" 
            @mouseup="eliminarLinea"
            class="configkonva"
            style="position: fixed !important;"
        >
            <v-layer ref="layer">
                <v-image 
                 :config="{ image: image_mono, draggable: false, width: 70, height: 70, x: 130, y: 0}"
                 @mouseup="trazarLineaMono"
                 ref="imgMono"
                ></v-image>
                <v-line :config="configLine"></v-line>
                <v-line :config="configLineTxtMono"></v-line>
                <v-line :config="configLineTxtMoto"></v-line>
                <v-line :config="configLineTxtPaleta"></v-line>
                <v-line :config="configLineTxtPelota"></v-line>
                <v-image
                 :config="{image: img_text_mono, x: 125, y: 170}"
                 ref="monoRef" 
                 @mousedown="iniciarLineaMono"
                >
                </v-image>
            </v-layer>
        </v-stage>

iniciarLineaMono(){
                let vm = this;
                console.log("CREANDO LINEA MONO");
                vm.ir_generando_linea_mono = true;
                const mousePos = this.$refs.stage.getStage().getPointerPosition();
                vm.configLineTxtMono = new Konva.Arrow({
                    points: [mousePos.x, mousePos.y, mousePos.x, mousePos.y],
                    pointerLength: 10,
                    pointerWidth: 10,
                    fill: 'blue',
                    stroke: 'blue',
                    strokeWidth: 4,
                    draggable: false
                });
            },

    trazarLineaMano(event){
                    let vm = this;
                    console.log("TRAZANDO LINEA MANO");
                    vm.$refs.imgMano.getNode().off("mouseup");
                    vm.mano_seleccionado = true; //La linea ha llegado a tocar la imagen 'mano' por tal razon es true, ha sido seleccionada.
                    if(vm.ir_generando_linea) {
                        console.log("HAND TEXT IS CONNECTED WITH HAND PICTURE, CORRECT
");
                        vm.ir_generando_linea = false;
                        vm.$refs.manoRef.getNode().off("mousedown");
                        vm.puntuacion.mano = 1;
                    }
                    else if(vm.ir_generando_linea_mono){
                        console.log("MONKEY TEXT IS CONNECTING WITH HAND PICTURE
");
                        vm.ir_generando_linea_mono = false;
                        vm.$refs.monoRef.getNode().off("mousedown");
                    }
                    else if(vm.ir_generando_linea_moto){
                        console.log("MOTORCYCLE TEXT IS CONNECTING WITH HAND PICTURE
");
                        vm.ir_generando_linea_moto = false;
                        vm.$refs.motoRef.getNode().off("mousedown");
                    }
    },

问题是，当我画线并在图像上并释放单击时，不会执行@mouseup事件，因此它不会进入方法“traceLineaMono”，现在如果我单独在图像上单击，然后释放单击，这样@mouseup事件就已经执行了

奇怪的是，有时有效，有时无效。非常感谢

新资料：

发生的情况是，释放点击是在线路上完成的，我如何才能避免这种情况发生

模拟箭头： 箭头正好在直线上

---

为了澄清这一点，代码使用箭头对象作为UI元素将鼠标向下点连接到当前鼠标指针位置。问题在于，鼠标向上移动事件是在arrow对象而不是mono图像上触发的，因此连接检查的逻辑永远不会触发

答案是停止线路监听事件。请参阅konva文档中的。在纯JS中禁用事件侦听的基本方法是object.ListingFalse。您可能需要稍微适应Vue

---

当您开始使用绘制对象进行UI反馈时，发现要被绘制对象劫持的鼠标事件对于新手来说是一个常见的绊脚石-您正在走一条人迹罕至的道路

我不理解您的代码，但我想知道在您释放鼠标时画布的构造是否存在问题。在某些情况下，行的重画将完成，鼠标移动时鼠标下的对象将是行-在其他情况下不是。您可以使用codesanbox在线演示您的问题吗？可能它不会触发图像上的鼠标，因为此时鼠标位置下方有一条线。因此该行触发mouseup。事实上，问题是鼠标在该行上，然后它在该行上使用@mouseup事件执行测试，并且该事件实际上已经完成。我如何纠正这种情况，即鼠标不在线？