在VueJs中，如何获取一个完整的单选按钮组的事件@focusout

如何解决在VueJs中，如何获取一个完整的单选按钮组的事件@focusout

我已经构建了我的自定义单选按钮组组件，并且大部分工作正常。但是，当焦点离开任何包含的单选按钮之外时，我想发出“group focusout”事件。

但是，按钮的@focusout都是单独触发，我找不到确定目标是否在组外的方法。

组件代码

我基本上在做（简化）：

<div v-for="(obj,index) in items" :key="index">      
        <label :for="id + '-' + obj.value">
            <input
                :name="name ? name : id"
                :key="index"
                :id="id + '-' + obj.value"
                :value="obj.value"
                :checked="obj.selected"
                @focusout="onFocusout"
                @change="updateradiobuttons($event.target.value)"
            />
            {{ $t(obj.text) }}
        </label>       
</div>

在@focusout 处理程序中，我进行了一些验证（未显示）并简单地传递事件：

private onFocusout(value) {
    console.debug('onFocusout',value);
    //...validation...
    this.$emit('focusout',value);
}

发出的事件

我正在记录接收到的事件并查看日志（使用 Chrome F12）

这是我在无线电组内更改选项时得到的结果：

FocusEvent {isTrusted: true,relatedTarget: input#caseBestaDataSearchResultSchule-3.form-control,view: Window,detail: 0,sourceCapabilities: null,…}
bubbles: true
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
path: (20) [input#caseBestaDataSearchResultSchule-2.form-control,label,div.radio.radio--left,div.radio-inline,div.col-sm-9,div.form-group,fieldset,form.form-horizontal,span,div,div#content.col-sm-12,div.row,div.container-fluid,div.container.container-main,body.mod.mod-layout.skin-layout-template-contentpage,html,document,Window]
relatedTarget: input#caseBestaDataSearchResultSchule-3.form-control
returnValue: true
sourceCapabilities: null
srcElement: input#caseBestaDataSearchResultSchule-2.form-control
target: input#caseBestaDataSearchResultSchule-2.form-control
timeStamp: 46397.884999983944
type: "focusout"
view: Window {window: Window,self: Window,document: document,name: "",location: Location,…}
which: 0
__proto__: FocusEvent

这是我点击周围空间时得到的：

FocusEvent {isTrusted: true,relatedTarget: null,sourceCapabilities: InputDeviceCapabilities,…}
bubbles: true
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
path: (20) [input#caseBestaDataSearchResultSchule-3.form-control,Window]
relatedTarget: null
returnValue: true
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input#caseBestaDataSearchResultSchule-3.form-control
target: input#caseBestaDataSearchResultSchule-3.form-control
timeStamp: 54147.71499999915
type: "focusout"
view: Window {window: Window,…}
which: 0
__proto__: FocusEvent

如何获得整个组的单个事件@focusout？

解决方法

我假设您当前在使用向上和向下箭头循环浏览每个收音机或通过触摸选择另一个选项时触发焦点事件。

如果是这种情况，您可以真正了解其他单选按钮的焦点状态的唯一方法是查看它们，使用 ref 将每个元素与 document.activeElement 进行比较或存储每个单选按钮的焦点状态。

如果您有任何活动的焦点课程，您也可以检查课程名称。

这是使用数据对象存储焦点状态的示例。

另外值得一提的是你需要在这里使用 nextTick 否则在你读取数据对象之前数据对象不会更新。

var arr = [
  ["a"],["b"],["c"],["d"]
];
arr.push(["e"]);
console.log(arr);

  new Vue({
el: '#app',data() {
  return {
    maleFocused: false,femaleFocused: false,otherFocused: false
  } 
},methods: {
  focusIn(e) {
    this[`${e.srcElement.id}Focused`] = true
  },async focusOut(e) {
    this[`${e.srcElement.id}Focused`] = false

    await this.$nextTick()

    const radioMaleFocused = this.maleFocused
    const radioFemaleFocused = this.femaleFocused
    const radioOtherFocused = this.otherFocused
    
    const radiosFocused = radioMaleFocused || radioFemaleFocused || radioOtherFocused
    
    if (!radiosFocused) {
      console.log('run your code here!')
    }
  }
}
  })