Sapper on:click IE11 中的事件修饰符

Question

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

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

<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 不起作用，所以可能猜测它不受支持。

Answer 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 的模块。

Sapper on:click IE11 中的事件修饰符

Sapper on:click event Modifiers in IE11

events

internet-explorer-11

svelte

sapper