在 <webview> 内部单击不会触发外部 <div> 上的 EventListener

Question

在下面的一段 javascript 中，我有一个事件监听器，它由点击 .content-container 触发，可以在提供的 html 中看到。

我的问题是通过<webview> 可见的内容内的单击不会触发我的事件侦听器。它不会触发应用程序中的点击事件是有道理的，但我的问题是如何让它触发点击事件？

document.querySelector('.content-container').addEventListener("click", function (event) {
    if ( event.target.classList.contains('toggle-nav') && !event.currentTarget.classList.contains('open') ) {
        event.currentTarget.classList.add('open');
    } else {
        event.currentTarget.classList.remove('open');
    }
}, false);

--

    <div class="content-container">
        <div class="titlebar">
            <button class="toggle-nav">toggle</button>
            <div class="title">Toolbar</div>
            <i class="icon search">icon</i>
        </div>
        <div class="toolbar">
            <i class="icon menu">icon</i>
            <i class="icon menu">icon</i>
            <button class="toggle-content-secondary">toggle</button>
        </div>
        <div class="content">
            <div id="contentareamain" class="primary">
                <webview id="foo" src="http://awebsite.com/" style="width: 100%; height: 100%; position: absolute;"></webview>
            </div>
            <div class="secondary">
                Extra Content
            </div>
        </div>
    </div>

谢谢 瑞恩

Answer 1

您希望您的用户能够在 web 视图中与 awebsite.com 进行交互吗？

如果您只想显示网站的内容（不太可能），您可以在其上放置一个透明的 div，以防止其收到点击。然后点击会转到您的处理程序。

否则，awebsite.com 默认会吃掉所有点击，接下来会发生什么取决于它如何处理这些点击。一方面，您可以监听某些 DOM 事件，例如 newwindow，如 webview documentation 中所述。但这几乎不符合您的要求。最可靠的方法是使用 webview 的 executeScript 方法将点击处理程序注入 awebsite.com。这对你有用吗？