Question

我的网站上安装了Angular Web组件。它使用Shadow DOM，所以它超级快（在我的情况下必须如此）。

在我的网站上，我在 h 上也有一个快捷方式，它会弹出一个弹出窗口，显示一些有用的信息。必须保持此 h 按键绑定不变。有关如何实现该示例的示例代码，请参见：https://jsfiddle.net/js1edv37/

这是一个简单的事件监听器，可以监听document：

$(document).on("keyup", function(e) {

}

但是，当我的Web组件将textarea或input元素作为焦点时，也会触发此事件。发生这种情况是因为它使用了Shadow DOM，外部的脚本无法访问它。

您可以通过在input和textarea元素内部和外部按键盘上的 h 进行测试。

是否有一种方法可以让我的脚本从Shadow DOM Web组件之外，仍然监听keyup事件，但使其监听页面上的 all 元素？甚至是Shadow DOM内部的内容。

Answer 1

在Web组件中，通过对querySelector()属性进行shadowRoot调用来获取输入元素：

let textareainshadow = div.shadowRoot.querySelector( 'textarea' )

然后监听keyup事件，并借助stopImmediatePropagation()方法停止传播。

textareainshadow.addEventListener( 'keyup' , ev => {
    console.log( 'caught', ev.type )
    ev.stopImmediatePropagation()
})

https://jsfiddle.net/7mkrxh25/1/

Answer 2

如果您保存对影子根的引用，则可以始终在其上搜索作为其子对象

$(document).on("keyup", function(e) {
    let focusedInputs = $("input:focus, textarea:focus").length + $(shadow).children("input:focus, textarea:focus").length;

    if (focusedInputs > 0) {
        return true;
    }

    if (e.keyCode === 72) {
        trigger();
    }
});

function trigger() {
    alert("If this was triggered, everything is perfectly fine");
}

let div = document.querySelector("div");
let shadow = div.createShadowRoot();
shadow.innerHTML = "<textarea>This shouldn't fail</textarea>";

textarea {
    width: 500px;
    height: 100px;
}

input {
    width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Some stuff here</textarea>
<br />
<input type="text" value="Some more text here" />

<br />
<br />

<h1>Shadow DOM element WON'T fail now :)</h1>

<div></div>

Fiddle

Shadow DOM外部的事件侦听器不会绑定到Shadow DOM内部的元素

2 个答案: