vue.js - vue的v-on:mouseup怎么控制只有鼠标左键响应?

问题描述

问 题

我使用了v-on:mouseup的点击事件,结果发现鼠标的右键点击时也响应事件
请问怎么控制只有鼠标左键点击时响应事件?
不用@click,发现@click事件会触发两次,不知道为什么

已经通过event.button判断解决了,谢谢,click为什么触发两次还不知道原因,要是事件冒泡为什么mouseup没事件冒泡呢,下面是代码,就是一个radio的组件

<template>
    <label class="rs_radio_wrap" v-for="radio in radioData" @mouseup="radioCheck(radio)">
        <div class="rs_radio" v-if="!radio.check" :class={'rs_radio_disable':radio.disable}>
        </div>
        <div class="rs_radio rs_radio_checked" v-if="radio.check" :class={'rs_radio_disable':radio.disable}>
            <div class="rs_radio_dot"></div>
        </div>
        <span class="rs_radio_text">{{radio.text}}</span>
        <input type="radio" class="rs_radio_input" :checked="radio.check" :disabled="radio.disable" />
    </label>    
</template>
<script>
    export default{
        props:{
            radioData:Array
        },
        computed:{
        },
        methods:{
            radioCheck(radio){
                let radioState=radio.check;
                if(!radio.disable)
                {
                    this.radioData.forEach(obj=>{
                        if(!obj.disable)
                        {
                            obj.check=false;
                        }
                    })
                    if(!radioState)
                    {
                        radio.check=true;
                    }
                }
            }
        }
    }
</script>

解决方案

可以event.button判断
event.button===0 左键
event.button===1 中键
event.button===2 右键

这篇关于vue.js - vue的v-on:mouseup怎么控制只有鼠标左键响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！