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中检测到一个点击但是在radio / checkbox div之外，所以我可以调用该函数来切换选项。

我主要在jquery标签下找到类似的问题，而VueJS则没有。

Answer 1

我会避免使用event.stopPropagation（）。各种各样的事情可能都在树上听得更高了。例如，如果用户在对话框外单击，您可能希望窗口上的onclick关闭模式对话框。不太激进的方法是查看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()
    }
}
});

检测Div内部的点击，但在VueJS中的特定子Div之外

2 个答案: