javascript - 检测 VueJS 中 Div 内部但特定子 Div 外部的点击

Question

我有一个页面，其中有 MCQ 选项，如下所示:

这是到目前为止选项部分的 HTML 代码:

<div v-for="(option, index) in optionsForFrontend">
            <div class="option">
                <div class="radio-check-item">
                    <input type="radio"
                        name="question"
                        :value="index"
                        v-model="picked"
                        v-if="question.metadata.choices === 'Single'">
                    <input type="checkbox"
                        name="question"
                        :value="index"
                        v-model="picked"
                        v-if="question.metadata.choices === 'Multiple'">
                </div>
                <div class="divider">

                </div>
                <div class="content-item">
                    <vue-markdown :source="option.option"></vue-markdown>
                </div>
            </div>
        </div>

我想通过点击选项内容来选择选项。因此，我在包含复选框和选项内容的外部 div(“选项”)上放置了一个 :click="functionToSelectOption" 。

问题是，当我选择复选框时，它会被选中，并且函数“functionToSelectOption”也会被调用，因为该复选框位于“option”div 内。

我希望能够检测到“选项”div 内部但单选/复选框 div 外部的点击，以便我可以调用该函数来切换选项。

我主要在 jquery 标签下发现类似的问题，而在 VueJS 上却没有发现类似的问题。

Answer 1

我会避免使用 event.stopPropagation()。所有种类的事物都可能在树的更高处聆听。例如，如果用户在对话框外部单击，您可能希望在窗口上单击 onclick 来关闭模式对话框。不太激进的方法是查看 event.target。 This jsfiddle测试 (event.target == event.currentTarget) 因此它只对父 div 上的点击使用react。

标记

<div id="ctr">
  <div v-for="(option,index) in options" 
    style="margin:10px;padding:10px;border:solid;border-radius:4px"
    @click="parent"
  >
    <input type="checkbox" :name="'invidiousChoice' + index" @click='child'> {{option.label}}
  </div>
</div>

JS

var vm = new Vue({
  el:"#ctr",
  data : {
  options:[{label:'terrible option'},{label:'disastorous option'}]
  },
  methods: {
    parent: function(event) {
      if(event.target == event.currentTarget)
        alert( 'parent clicked');
    }
  }  
})