div 下的一列span 如何确定点击的是哪一个？

Question

1.

2.

<div class="card-color" @click="choicedColor">
                    <span>*</span>
                    <span>卡片颜色:</span>
                    <span></span>  <!--#a9d92d   Color110-->
                    <span></span>  <!--#63b359   Color010-->
                    <span></span>  <!--#45bd80   Color020-->
                    <span></span>  <!--#509fc9   Color030-->
                    <span></span>  <!--#5885cf   Color040-->
                    <span></span>  <!--#9062c0   Color050-->
                    <span></span>  <!--#d09a45   Color060-->
                    <span></span>  <!--#e4b138   Color070-->
                    <span></span>  <!--#ee903c   Color080-->
                    <span></span>  <!--#f08500   Color120-->
                    <span></span>  <!--#dd6549   Color090-->
                    <span></span>  <!--#cc463d   Color100-->
                </div>

    choicedColor(e){
            console.log(e)

        },
        

3.我想知道我点击的是哪一个元素，通过那个属性判定？

Answer 1

我会根据数据循环生成span绑定点击事件传入index参数，就可以知道是哪个了。

Answer 2

你直接v-for循环，在span上绑方法就好了

Answer 3

v-for里面用index来标记一下 v-for="(item, index) in items"

Answer 4

console.log(e.target.style)

e.target.tagName可以判断点击的是div还是span
我据地在生成颜色卡的时候给每个色卡做标记然后再去判断比较好

Answer 5

 var node = document.getElementsByClassName('card-color')[0];
   node.addEventListener('click', function (eve) {
     var eve = eve || window.event,
     target = eve.target || eve.srcElement;
  })