0

我有一个正在运行的 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不起作用所以可能猜测它不支持。

4

1 回答 1

0

默认汇总配置包括“旧版”支持。它会自动检测较旧的浏览器并使用不同的 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 的模块提供服务。

于 2020-07-15T12:05:20.317 回答