Webview 窃取 click, touchstart, touchend 事件答案

【问题标题】：Webview stealing click, touchstart, touchend eventsWebview 窃取 click, touchstart, touchend 事件
【发布时间】：2017-04-25 08:53:48
【问题描述】：

我正在将 Chrome 应用程序转换为电子应用程序。该应用程序本身以全屏信息亭模式运行提供的 URL（带有一些其他配置选项）。我希望能够检测渲染器进程中对 webview 父元素的点击，但是 webview “窃取”点击、touchstart 和 touchend，同时“共享”mousedown 和 mouseup。我创建了一个非常基本的应用程序，其网页包含指向空白网页的 webview。我在 webview 和父进程的代码中添加了 click、mousedown 和 mouseup 侦听器来记录。如果我在 webview 外部单击，则父级的开发控制台输出“mousedown mouseup click”，但如果我单击 webview，则父级的开发控制台输出“mousedown mouseup”，而 webview 的开发控制台输出“mousedown mouseup click”

此应用主要用于触摸屏，因此 mousedown/mouseup 不是解决方案。我需要 click、touchstart 和 touchend 才能工作。为什么 mousedown 和 mouseup 从 webview 冒泡，而 touchstart、touchend 和 click 没有？

意图是允许在 webview 中加载交互式页面，但具有一些主要进程监视的手势快捷方式，例如重新加载 webview 的一系列单击。请参阅下面的代码。

** 我觉得自己很笨。当然它在 Chromium 浏览器中工作，webview 甚至不是一个有效的标签。请忽略我之前的编辑。

父进程：

<!DOCTYPE html>
<html>
  <head>
    <script>
    setTimeout(function(){
        document.addEventListener('click', function(e) {
          console.log('click');
        })
        document.addEventListener('mousedown', function(e) {
          console.log('mousedown');
        })
        document.addEventListener('mouseup', function(e) {
          console.log('mouseup');
        })
        document.addEventListener('touchstart', function(e) {
          console.log('touchstart');
        });
        document.addEventListener('touchend', function(e) {
          console.log('touchend');
        });
        document.getElementById('webview').openDevTools();
      }, 1000);
    </script>
    <title>Electron Test</title>
  </head>
  <body>
    <div id="container">
      <webview id="webview" src="http://localhost/blank.html" style="width:100%;height:100%;"/>
    </div>
  </body>
</html>

网页浏览过程：

<!DOCTYPE html>
<html>
<head>
  <script>
    document.addEventListener('click', function(e) {
      console.log('webview click');
    });
    document.addEventListener('mousedown', function(e) {
      console.log('webview mousedown');
    });
    document.addEventListener('mouseup', function(e) {
      console.log('webview mouseup');
    });
    document.addEventListener('touchstart', function(e) {
      console.log('webview touchstart');
    });
    document.addEventListener('touchend', function(e) {
      console.log('webview touchend');
    });
  </script>
  <title>Hello World!</title>
</head>
<body>
  Hello World!
</body>
</html>

【问题讨论】：

标签： javascript webview electron

【解决方案1】：

当然。 webview是iframe，iframe不会冒泡这些事件

【讨论】：