Question

假设我的组件中有剪贴板粘贴事件，如下所示。

window.addEventListener('paste', this.insertNewRowsBeforePaste.bind(this));

然后当我按下键盘上的ctrl + V时，它会调用此事件，这是一个ClipboardEvent

insertNewRowsBeforePaste(event) {   
const tabName = // <---- I need to be able to see which tab the user has clicked on then I can do other processing based on the current tab.
}

所以我希望它说tabName =＆＃39; Tab 1＆＃39;或者＆＃39; Tab 2＆＃39;因为我的组件是一个带有多个选项卡的选项卡控件。

Answer 1

EventTarget event.target将提供触发此事件的HTMLElement。然后，您可以定位<button>，<input>和<a>等元素的name属性。您还可以访问其他属性，例如innerHTML和textContent以进行检查。

insertNewRowsBeforePaste(event) {   
    const target = event.target;
    const name = target.name; 

    console.log(name);

    if (name.indexOf('Tab 1') > -1) { console.log('Tab 1'); }
}

以下是使用event.target点击元素的example来访问各自的name，innerHTML和textContent属性值。

如果您在TypeScript中执行此操作，则需要在target上使用强制转换/类型断言来访问HTMLButtonElement | HTMLInputElement | HTMLAnchorElement等name属性：

insertNewRowsBeforePaste(event) {
    const target = event.target as HTMLButtonElement;
    const name = target.name;

    // or
    // const name = (<HTMLButtonElement> event.target).name;

    // or
    // const target = event.target as HTMLButtonElement;
    // const { name } = target;        
}

希望这有帮助！

如何搜索事件以获取元素的名称？

1 个答案: