在 Svelte 组件中单击焦点切换

Question

我制作了一个用于输入财务数字的组件，用于我的输入表单。它现在真的很好用，除了一个奇怪的行为：当我点击输入字段时，它会按预期获得焦点，但是当它已经有焦点时点击它会带走焦点。

组件中只有一个 on:click 处理程序，当我删除它时，行为没有改变。所以，我不知道是什么导致了这种奇怪。

<p>Input with precision=2 <Money id=first bind:value=a precision=2/>
    <br/>Value={a}</p>
<hr/>
<p>Input with no precision specified <Money ref:m2 bind:value=b/><br/>
    Value={b}</p>


<script>

    export default {
        data(){return {
            a:1234.34,
            b:3.14159265
        }},

        components: {
            Money : "./Money.html"
        }
  }
</script>

<style>
    /* How to sytle the component*/
    :global(#first) {
        font-family:serif;
        lobal(#first) {
        font-family:serif;
        background:#ff9;
    }
</style>

这是显示问题的 REPL。

https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

Answer 1

这是因为div.focused:before {...} CSS 在输入前创建了一个伪元素。您可以添加 pointer-events: none 以防止这种情况发生 — example here。

（感谢我们 Discord chatroom 中的 njb 解决了这个问题 - 我们有一个支持渠道，也非常欢迎您提出此类问题！）