Question

为什么在将某些文字输入到in this fiddle?

之类的输入后，第一次不会调用“点击”回调

var app = {};

app.controller = function(){
    this.data = m.prop("");
    this.click = function(){
        alert("button clicked");
    };
};

app.view = function(ctrl){
    return m("html", [
        m("body", [
            m("div", [
                m("p", ctrl.data()),
                m("input[type=text]", { onchange: m.withAttr("value", ctrl.data) }),
                m("button", { onclick: ctrl.click }, "Click")
            ])
        ])
    ]);
};

m.module(document, app);

Answer 1

输入的onchange事件在鼠标按下时触发，这会导致视图重绘，从而使按钮向下移动。鼠标向上触发click事件（尝试单击并按住鼠标按钮而不键入任何内容以查看我的意思）。通常，由于鼠标按钮机械开关上静止和按下位置之间的物理距离，快速点击在底层onmousedown和onmouseup事件之间有大约200ms的间隙。

所以基本上，发生的事情是：

1 - 按下鼠标按钮，触发更改

2 - 查看重绘，并向下移动按钮，为<p>

中的文字腾出空间

3 - 一段时间之后，鼠标按钮被取消，触发onclick

4 - 该事件查看鼠标的当前位置（现在位于<p>之上），因此它不会触发按钮上的事件

通过输入内容，然后单击并按住鼠标按钮，然后再次将光标拖到按钮上，可以看到这种情况。

为了避免这个问题，您可以使用onmousedown而不是onclick，以便onchange和onmousedown都在同一个动画帧中发生，或者如果UI允许，您可以移动按钮下方的<p>

在Mithril中点击第一个按钮时没有运行Onclick事件

1 个答案: