在 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”也被调用，因为复选框位于“选项”div内。

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

我大多在 jquery 标签下发现类似的问题，而 VueJS 没有。

Answer 1

我会避免 event.stopPropagation()。各种各样的事情都可能在树的更高处听。例如，如果用户在对话框外单击，您可能希望在窗口上单击以关闭模式对话框。不太激进的方法是查看 event.target。 This jsfiddle 测试 (event.target == event.currentTarget) 所以它只对父 div 上的点击做出反应。

标记

<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');
    }
  }  
})

Answer 2

您可以在子元素中使用 event.stopPropagation()。

这是有效的 JSFiddle 解决方案：Link

HTML

<div id="app">
<div @click="parent">
    Parent
    <div>
        <input type="checkbox" @click="child">
    </div>
</div>
{{message}}

JS

new Vue({
el: '#app',
data: {
    message: ''   
},
methods: {
     parent: function() {
        this.message = 'parent clicked';
    },
    child: function() {
        event.stopPropagation()
    }
}
});