SvelteKit中使用Plotly.js时无href的a标签触发同路由跳转求助

问题描述 #

在SvelteKit应用中使用Plotly.js时，页面包含Plotly图表后，任何不带href属性的<a>标签被点击都会触发跳转到当前路由，引发功能异常和糟糕的用户体验。相关代码示例如下：

<script>
    import { onMount } from "svelte";

    onMount(() => {
        var trace1 = {
            x: [1, 2, 3, 4],
            y: [10, 15, 13, 17],
            mode: 'markers',
            type: 'scatter'
        };

        var trace2 = {
            x: [2, 3, 4, 5],
            y: [16, 5, 11, 9],
            mode: 'lines',
            type: 'scatter'
        };

        var trace3 = {
            x: [1, 2, 3, 4],
            y: [12, 9, 15, 12],
            mode: 'lines+markers',
            type: 'scatter'
        };

        var data = [trace1, trace2, trace3];

        Plotly.newPlot('example-plot', data);
    });
</script>

<svelte:head>
    <script src='https://cdn.plot.ly/plotly-latest.min.js' crossorigin/>
</svelte:head>

<div id="container">
    <p>
        Test link: <a style="color: blue; cursor: pointer;">click here</a>
    </p>

    <div id="example-plot" style="width:900px; height:500px; margin-top: 10px;"></div>
</div>

原因分析 #

SvelteKit的默认导航增强逻辑会监听页面内所有<a>标签的点击事件，当点击无href的<a>时，默认行为是跳转当前路由；而Plotly.js初始化时会给文档或父元素添加全局事件监听器，导致事件冒泡后触发了SvelteKit的导航拦截逻辑。

解决方法 #

1. 替换非导航用的<a>标签为语义化元素 #

如果<a>标签仅作为可点击文本而非导航使用，替换为<span>更符合HTML语义，同时从根源避免触发导航：

<p>
    Test link: <span style="color: blue; cursor: pointer;">click here</span>
</p>

2. 阻止<a>标签的默认点击行为 #

若必须保留<a>标签，添加on:click|preventDefault修饰符阻止默认导航行为：

<p>
    Test link: <a style="color: blue; cursor: pointer;" on:click|preventDefault>click here</a>
</p>

3. 配置Plotly减少全局事件干扰 #

如果图表需要交互，初始化Plotly时通过config选项禁用可能引发冲突的全局事件：

Plotly.newPlot('example-plot', data, {}, {
    scrollZoom: false,
    // 若不需要图表交互，可设置staticPlot: true彻底禁用Plotly事件
    // staticPlot: true
});

4. 自定义SvelteKit导航增强（谨慎使用） #

若上述方法都不适用，可自定义导航增强逻辑，仅处理带有效href的<a>标签：

<script>
    import { enhance } from '$app/forms';

    function customEnhance(form) {
        // 仅处理表单提交，或自定义<a>标签的导航逻辑
        return enhance(form);
    }
</script>

<form use:customEnhance>
    <!-- 表单内容 -->
</form>

内容的提问来源于stack exchange，提问作者Gum Rick