如何获得聚合物组件内部元素的实际事件锁定目标

How do I get the actual event keydown target of an element inside a polymer component?

本文关键字：事件 锁定目标 元素 何获得 聚合物 组件 内部      更新时间：2023-09-26

防止退格导航返回的代码通常采用类似于这种方法的方法，即除了Input、TextArea等一小部分已知元素类型之外，窗口keydown事件会被阻止退格。

这对聚合物自定义元素中的元素不太适用，因为keydown事件目标类型是自定义元素的类型，而不是获得keydown的实际元素。每个自定义元素的类型都不同。这使得目标元素类型的阻挡退格无法维持。

有没有办法知道在聚合物元素中，按下键的实际元素的类型？或者有更好的方法吗？

只要可能，最好尝试设计您的项目，以避免破坏封装。这就是在跨越阴影边界时调整event.target的原因。

但是，event.path属性是一个转义图案填充，它包含已看到事件的所有元素的数组，应该允许您解决此问题。

从事件获取元素：div、INPUT、TEXTAREA。。。

e.target.nodeName

一种方法是深入挖掘自定义元素的shadowdom（及其shadowdom），以获得真正的活动元素。像这样的东西在Chromium 36:上工作

function getActiveElem(target) {    
  do {
    if (target.shadowRoot != null)  {      
      target = target.shadowRoot.activeElement;
    }
  } while(target.shadowRoot != null);
  return target;
}
window.addEventListener("keydown", function(e) {
  if (e.keyCode == 8) {     
    var preventKeyDown;
    var d = getActiveElem(e.target);  // Get the real active element
    switch (d.tagName.toUpperCase()) {
      case 'INPUT':
        // more smarts here
        preventKeyDown = false;
        break;         
      // case TEXTAREA, et al.
    }
    // e.preventDefault() if preventKeyDown        
  }
}
相关文章：