如何在svelte-magnifier组件中处理on:click点击事件？

问题原因 #

svelte-magnifier组件的DOM结构中，底层<img>被外层容器元素包裹，组件内部为实现放大逻辑处理点击事件时，可能阻止了事件冒泡，导致直接绑定在组件根元素上的冒泡阶段点击事件无法触发；而原生<img>没有外层拦截，事件能正常响应。

解决方案 #

方法1：事件捕获模式+坐标修正 #

通过|capture修饰符在事件捕获阶段监听点击，绕过组件内部的冒泡阻止逻辑，同时手动计算相对于<img>的坐标：

<script>
    import { Magnifier } from 'svelte-magnifier';
    
    let imageUrl = "https://gcdnb.pbrd.co/images/OYQvquvaVWpu.jpg?o=1"
    
    let x = 0;
    let y = 0;
    
    function handleClick(event) {
        // 定位组件内部的img元素
        const img = event.target.closest('img');
        if (img) {
            const rect = img.getBoundingClientRect();
            // 计算相对于img左上角的坐标
            x = Math.round(event.clientX - rect.left);
            y = Math.round(event.clientY - rect.top);
        }
    }
</script>

<Magnifier src={imageUrl} width="500px" on:click|capture={handleClick} />

<div class="coordinates">You clicked at ({x}, {y})</div>

<img src={imageUrl} width="500px" on:click={handleClick}/>

方法2：直接给内部img绑定事件 #

通过bind:this获取组件实例，在组件挂载后直接给内部的<img>添加点击事件监听：

<script>
    import { Magnifier } from 'svelte-magnifier';
    import { onMount } from 'svelte';
    
    let imageUrl = "https://gcdnb.pbrd.co/images/OYQvquvaVWpu.jpg?o=1"
    
    let x = 0;
    let y = 0;
    let magnifierRef;

    function handleClick(event) {
        x = event.offsetX;
        y = event.offsetY;
    }

    onMount(() => {
        const img = magnifierRef.querySelector('img');
        if (img) {
            img.addEventListener('click', handleClick);
            // 组件销毁时移除监听
            return () => img.removeEventListener('click', handleClick);
        }
    });
</script>

<Magnifier bind:this={magnifierRef} src={imageUrl} width="500px" />

<div class="coordinates">You clicked at ({x}, {y})</div>

<img src={imageUrl} width="500px" on:click={handleClick}/>

说明 #

• 方法1无需额外生命周期处理，适合快速实现；
• 方法2直接绑定到目标<img>，坐标计算更直接，无需手动修正。

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