浏览器同步 onchange 事件未在镜像浏览器上触发

Question

Browser-sync 有一个名为 "Interaction sync" 的功能，允许您 "scroll, click, refresh and form actions are mirrored between browsers while you test."，但它似乎不适用于 onchange 事件。

虽然 React component `onChange` event not being triggered when synced with BrowserSync 指的是它不适用于 React，但它甚至不适用于带有 js 的简单 html。

我们使用的许多表单都有条件依赖字段，这会阻止您填写此类表单。有解决办法吗？

我在下面提供了此表格的简化版本。要对此进行测试：

复制以下代码段并将其另存为 html 文件
导航到包含 html
打开命令提示符，导航到 html 文件，然后运行浏览器同步启动 --server
browser-sync 将启动包含默认 url (http:localhost:port) 的浏览器，将“/test.html”附加到 url
将 url 复制到另一个浏览器

您会看到，在选择下拉镜子时，事件和关联javascript不要发射。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of the document</title>
        <style>
            .hide{
                display:none !important;
            }
        </style>
    </head>
    <body>
        <form>
            <h1>Conditional Form</h1>
            <label>dependee</label>
            <select name="radioGroup" id="radioGroup" onchange="displayDependent();">
                <option value="-1">--</option>
                <option value="radio1">radio1</option> 
                <option value="radio2">radio2</option>
            </select>
            <div id="text1Group" class="hide">
                <label>text1</label>
                <input type="text" name="text1">
            </div>
            <div id="text2Group" class="hide">
                <label>text2</label>
                <input type="text" name="text2">
            </div>
            <div id="text3Group">
                <label>text3</label>
                <input type="text" name="text3">
            </div>
        </form>
    </body>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    <script>
        function displayDependent() {
            var dropDownSelect = document.getElementById('radioGroup').value;
            // hide both
            if (dropDownSelect == "-1") {
                $("#text1Group").addClass("hide");
                $("#text2Group").addClass("hide");
            }
            // show 1 hide 2
            if (dropDownSelect == "radio1") {
                $("#text1Group").removeClass("hide");
                $("#text2Group").addClass("hide");
            }
            // show 2 hide 1
            if (dropDownSelect == "radio2") {
                $("#text2Group").removeClass("hide");
                $("#text1Group").addClass("hide");
            }
        }
    </script>
</html>

Answer 1

目前似乎不可用。

偶然发现了这个 github 问题，不久之后：
https://github.com/BrowserSync/browser-sync/issues/22

浏览器同步 onchange 事件未在镜像浏览器上触发

browser-sync onchange event not fired on mirrored browsers

onchange

dom-events

browser-sync