Question

我有一个我不知道的问题与事件的流星实现或一般的javascript事件有关。

我有一个附加到“更改”事件的文本框。在它旁边，我有一个附加到“点击”事件的按钮。

当我在文本框中进行更改并单击按钮时，单击事件不会触发（仅更改事件）。因此，我必须单击该按钮两次才能触发点击事件。

在Firefox中，如果我将mousedown事件而不是click事件附加到按钮，它就可以工作。在Chrome中，它无论如何都无法正常工作。

提前谢谢。

重现问题的最小代码：

JAVASCRIPT：testevent.js

if (Meteor.isClient) {
  Session.set("something", "something");

  Template.hello.foo = function() {
    return Session.get("foo");
  };

  Template.hello.something = function() {
    return Session.get("something");
  }
  Template.hello.events({
    'click .buttonid' : function () {
      console.log("click !");
    },
    'change  .textid' : function (e,t) {
      console.log("change !");
      var bar = e.target.value;
      Session.set("foo",bar);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

HTML：testevent.html

<head>
  <title>testevent</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <input type="text" class="textid" value="{{foo}}"/>
  <input type="button" class="buttonid" value="{{something}}" />
</template>

当我用id替换class时，click事件会触发，但是当我有多个具有相同id的字段时，事件只能在一个字段上起作用。

Answer 1

问题与hello.foo：

有关

Template.hello.foo = function() {
  return Session.get("foo");
};

以及foo的值用于反应填充文本输入的事实。如果删除hello.foo函数，一切都按预期工作。当用户单击该按钮时，将触发更改事件，该事件设置"foo"会话变量，从而导致模板重新呈现。我认为渲染过程会清除剩余的事件队列，因此点击处理程序永远不会触发。

有几种方法可以解决这个问题。一种简单（但粗略）的方法就是延迟在change事件处理程序中设置会话变量。例如：

Meteor.setTimeout(function(){Session.set("foo", bar);}, 100);

显然，您需要选择适当的延迟，这可能与浏览器/数据有关。或者，您可以将文本输入放在自己的模板中。例如：

<template name="hello">
  {{> helloText}}
  <input type="button" class="buttonid" value="{{something}}" />
</template>

<template name="helloText">
  <input type="text" class="textid" value="{{foo}}"/>
</template>

将事件正确绑定到此新模板后，您会发现helloText将与hello分开呈现，因此您的活动将会被保留。

Meteor：同时触发change事件时未触发的click事件

1 个答案: