유성 : 변경 이벤트가 동시에 발생하면 클릭 이벤트가 발생하지 않습니다.

이벤트의 유성 구현 또는 일반적으로 자바 스크립트 이벤트와 관련된 문제가 있습니다.유성 : 변경 이벤트가 동시에 발생하면 클릭 이벤트가 발생하지 않습니다.

"변경"이벤트에 첨부 된 텍스트 상자가 있습니다. 그 옆에는 "클릭"이벤트에 연결된 단추가 있습니다.

텍스트 상자를 변경하고 단추를 클릭하면 클릭 이벤트가 발생하지 않습니다 (변경 이벤트 만 수행). 클릭 이벤트가 발생하면 버튼을 두 번 클릭해야합니다.

Firefox에서는 click 이벤트 대신 mousedown 이벤트를 첨부하면 작동합니다. Chrome에서는 어느 쪽이든 작동하지 않습니다.

미리 감사드립니다.

최소한의 코드 문제 재현 :

이

자바 스크립트가 : 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를 가진 여러 필드가있을 때 이벤트는 하나의 필드에서만 작동합니다.

출처

2013-05-26 Vincent J

문제를 검사하기 위해 템플릿과 컨트롤러 코드를 최소화하는 것이 좋습니다. –

나는 문제를 demosntrating 몇 가지 최소한의 코드를 추가했습니다. –

코드를 제공해 주셔서 감사합니다. 불행히도 내 컴퓨터 (Ubuntu 13.04)에서 문제를 재현 할 수 없습니다. FF와 크롬 모두에서 버튼을 클릭 할 때'change' 및'click' 이벤트가 발생합니다. –

문제는 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 별도로 렌더링되며, 따라서 귀하의 이벤트가 유지됩니다 것을 발견 할 것이다.

출처

2013-05-29 03:31:37

그래, 그게 내가 생각한거야,하지만 어떻게이 문제를 우회? 실제 코드는 이처럼 어리석은 짓을하지 않습니다. 폼 필드가 느슨해지면 mongo 컬렉션이 업데이트됩니다. 이상한 것은 브라우저의 동작입니다.이 버그는 "id"로 "클래스"를 대체 할 때 Firefox에서 발생하지 않지만 양식 필드의 인스턴스가 여러 개있을 가능성은 줄어 듭니다. –

우리는 두 가지 이벤트와 렌더링을 다루고 있으며, 모두 임의로 주문할 수 있습니다. 결과가 브라우저에 따라 달라지는 것은 놀랄 일이 아닙니다. 내 답변에 가능한 일반적인 솔루션을 추가했습니다. 더 많은 대안이있을 수 있지만 더 자세한 구현 정보가 없으면 말하기가 어렵습니다. –

감사합니다. 내가 한 것은, 일부 레코드를 하위 템플릿에 배치하고 클래스 선택기를 id 선택기로 바꾼 것입니다. 어떤 이유로, "버그"id 선택기와 함께 발생하지 않습니다. 도와 주셔서 감사합니다. –

유성 : 변경 이벤트가 동시에 발생하면 클릭 이벤트가 발생하지 않습니다.

답변

관련 문제