Sapper on：IE11 中的点击事件修饰符答案

【问题标题】：Sapper on:click event Modifiers in IE11Sapper on：IE11 中的点击事件修饰符
【发布时间】：2020-07-15 20:05:20
【问题描述】：

我有一个正在运行的 sapper 应用程序，在现代浏览器中运行良好，如果可以的话，我正在尝试支持 IE11。

我遇到的问题是没有事件修饰符触发。我的代码如下所示：

<script>
    let active = false;   

    function clickHandle() {

        alert("Hello");

        if( !active ) {
            active = true
            window.document.body.classList.add('m-active')
        } else {
            active = false;
             window.document.body.classList.remove('m-active')
        }
    
    }
</script>

<div on:click|preventDefault={clickHandle}>
            <svg height="33" viewBox="0 0 30 33" width="30" xmlns="http://www.w3.org/2000/svg">
                <g fill="#2e2e46" fill-rule="evenodd">
                    <path d="m29.2499952 0-29.2499952 3.64484922v6.51349338l29.2499952-3.64464779z"/>
                    <path d="m29.2499952 11-29.2499952 3.6448492v6.5134934l29.2499952-3.6446478z"/>
                    <path d="m29.2499952 22-29.2499952 3.6448492v6.5134934l29.2499952-3.6446478z"/>
                </g>
            </svg>
        </div>

IE11 不会触发任何on:click 事件。我正在使用默认的 rollup.config - 不确定它是否是我无法支持 IE11 的原因之一，因为尝试在 IE11 中测试 https://svelte.dev/tutorial/event-modifiers 不起作用，所以可能猜测它不支持。

【问题讨论】：

只是事件处理程序失败了，还是客户端应用程序根本没有安装？（您可以通过包含 console.log('running') 之类的内容来测试它并检查它是否显示在 devtools 中。）如果是后者，下面 digby280 的答案可能是正确的
你可以尝试检查一下bubble或者Bbabel.js。此外，您可以添加必要的 polyfill 并尝试检查 es-6 shim。您可以参考此博客以获取详细信息。 blog.az.sg/posts/svelte-and-ie11
大家好，对不起。整个应用程序运行良好，只是事件不会在 IE11 中启动。我将尝试此处列出的建议，并让您知道我的进展情况。就配置而言，我有点超出我的深度，需要做一些家庭教育。

标签： events internet-explorer-11 svelte sapper

【解决方案1】：

默认汇总配置包括“旧版”支持。它会自动检测较旧的浏览器并使用不同的 JavaScript。但是，此旧版支持不包括对 IE11 开箱即用的支持。处理它的逻辑如下所示：

(function() {
    try {
        eval("async function x(){}");
        var main = "${main}"
    } catch (e) {
        main = "${legacy_main}"
    };
    var s = document.createElement("script");
    try {
        new Function("if(0)import('')")();
        s.src = main;
        s.type = "module";
        s.crossOrigin = "use-credentials";
    } catch (e) {
        s.src = "${req.baseUrl}/client/shimport@${build_info.shimport}.js";
        s.setAttribute("data-main", main);
    }
    document.head.appendChild(s);
}());

您将需要更多的 polyfill。您可能会发现的第一个问题是 shmimport 没有它们就无法工作。这里有一些讨论：https://github.com/Rich-Harris/shimport/issues/4。您还需要提供转译为 ES5 的模块。

【讨论】：