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致谢，以弄清这一点-我们有一个支持渠道，也欢迎您提出类似问题，以供解答！）

专注于切换Svelte组件中的点击

1 个答案: