如何监听来自 Shadow DOM 的鼠标悬停事件。我确实尝试了下面的片段代码，但什么也没发生。单击“添加”按钮后会生成模板实例，我为其注册鼠标悬停事件，并希望在鼠标悬停时触发此事件。
非常感谢
HTML
<body>
<h1 class="text-center">Test import Node</h1>
<div class="container-fluid" style=" background-color: #FAFAFA"></div>
<div class="col-md-12" id = 'root'>
<button type="button" class="btn btn-default go" id='_add'><i class="fa fa-pencil-square-o"></i> Add</button>
<div id = 'textbox' style="height: 200px; width: 400px; font-size: 18px"></div>
</div>
<template id = 'area'>
<div style="height : 400px; width: 300px ; background-color: red"></div>
</template>
</body>
Javascript
$(document).ready(function() {
var button = document.querySelector('#_add');
button.addEventListener('click', function(){
check();
}, false);
});
function check(){
// document.querySelector('#textbox').innerHTML = "Ukie";
var content = document.querySelector('#area').content;
content.addEventListener('mouseover', function(){
display();
}, false);
var root = document.querySelector('#root');
root.appendChild(document.importNode(content, true));
}
function display(){
document.querySelector('#textbox').innerHTML = "Here";
}
最佳答案
根据 addEventListener 文档:
The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).
因此，当您调用 addEventListener 时，元素必须存在于 DOM 中。
作为解决方法，您可以使用 event delegation使用jquery on 方法来实现相同的效果。这是一个工作jsfiddle通过稍微调整你的样本。
$('#root').on('mouseover', '.dyn', function(){
display();
});
这里绑定(bind)的元素将是模板内容的父元素(您确信它在绑定(bind)事件时会存在)，并且您将内容 html 的选择器作为参数传递给 .on 方法。因此，每当子事件(在本例中是您的模板内容)上发生事件时，它就会冒泡到父事件并触发回调。
关于javascript - 监听 Shadow Dom 的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32423596/