如何检测一个FORM的整个FOCUS

Question

问题描述：
做一个表格；初始状态只显示一个input field，当获得focus的时候会显示出其他的input.
我在做这个form的时候不能同时解决以下问题：
第一种：当鼠标点击空白块（表格外面的的区域时），表格应还原倒初始状态（只显示一个input field)
第二中：当鼠标点击form里面的input的时候，不会还原初始状态，会保持显示全部的input field）

以下为代码-用的vue.js 2.0-- 类似的例子是google keep （添加note的那个表格）

<form @focusin="isFocus=true" @focusout="isFocus=false" tabindex="0" class="column is-3 is-offset-4 hero is-primary">
      <p class="control">
        <input @focusin="isFocus=true" class="input is-warning" spellcheck="true" type="text" placeholder="Title">
      </p>
      <p v-if="isFocus" class="control">
        <textarea class="textarea is-hovered" spellcheck="true" placeholder="Take a note..."></textarea>
      </p>
      <p v-if="isFocus" class="control">
        <input class="input is-hovered" type="text" placeholder="Tag">
      </p>
      <p v-if="isFocus" class="control">
        <button class="button is-warning is-pulled-right">  <span class="icon is-small">
      <i class="fa fa-check"></i>
    </span>
    <span>Done</span></button>
      </p>
    </form>
  


  
</div>
</template>


<script>
  export default {
    name: 'note',
    data () {
      return {
        notes: [],
        isFocus: false
      }
    },
    methods: {


    }
  }
</script>

Answer 1

<form @focusin.self="isFocus=false" tabindex="0" class="column is-3 is-offset-4 hero is-primary">

https://jsfiddle.net/KingMari...

或者用 focus 事件，参见：https://developer.mozilla.org...
focusin 事件会冒泡，focus 事件不冒泡

Answer 2

你是想要这个效果？
demo