0

イベントの meteor 実装または一般的な Javascript イベントに関連するかわからない問題があります。

「変更」イベントにテキストボックスが添付されています。その隣には、「クリック」イベントに関連付けられたボタンがあります。

テキスト ボックスを変更してボタンをクリックすると、クリック イベントが発生しません (変更イベントのみが発生します)。そのため、クリック イベントを発生させるには、ボタンを 2 回クリックする必要があります。

mousedownFirefox では、クリック イベントの代わりにイベントをボタンにアタッチすると機能します。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 に置き換えるとクリック イベントが発生しますが、同じ id を持つ複数のフィールドがある場合、イベントは 1 つのフィールドでのみ機能します。

4

1 に答える 1

1

この問題は、次のものに関係していhello.fooます。

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

の値はfoo、テキスト入力をリアクティブに設定するために使用されます。関数を削除すると、hello.fooすべてが期待どおりに機能します。ユーザーがボタンをクリックすると、変更イベントが発生し、"foo"セッション変数が設定され、テンプレートが再レンダリングされます。レンダリング プロセスによって残りのイベント キューがクリアされるため、クリック ハンドラーが起動しないと思います。

これを修正するには、いくつかの方法があります。簡単な (しかし大雑把な) 方法は、変更イベント ハンドラーでセッション変数の設定を遅らせることです。例えば：

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ため、イベントが保持されることがわかります。

于 2013-05-29T03:31:37.410 に答える