Polymer를 사용하는 웹 응용 프로그램에서 javascript 함수 dispatchEvent를 사용하여 문제가 발생했습니다. 내 코드는 크롬에서 잘 실행하지만, 파이어 폭스 (V31과 V33), 나는 다음과 같은 오류가 나타납니다 여기에 Polymer를 사용하여 dispatchEvent를 사용하는 데 문제가 있습니다.
TypeError: Argument 1 of EventTarget.dispatchEvent does not implement interface Event.
button.dispatchEvent(new CustomEvent('chosen', {'detail': value}));
을, 나 또한 노력 :
var event = new Event('chosen');
event.detail = value;
button.dispatchEvent(event);
결과는 동일 :이 코드는 크롬에서 잘 작동하지만,이 dispatchEvent에 도달 할 때이 같은 오류 메시지와 함께 실행을 중단.
저는이 코드가 Firefox에서 작동해야한다고 확신합니다 (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events 참조). 실제로이 코드는 Firefox의 비 폴리머 시나리오에서 잘 작동합니다. (즉, 폴리머 가져 오기/스크립트를 사용하지 않고 어떤 방식 으로든 이벤트를 생성하고 파견하는 경우 정상적으로 작동합니다.)
가장 좋은 추측은 Polymer 프레임 워크 (platform.js 또는 polymer)에있는 것입니다. js)는 이벤트 주변의 내장 함수를 재정의합니다. (0.3.4 버전을 사용 중입니다.)
나는 광범위하게 검색해 봤지만 완전히 동일한 문제가있는 사람을 찾을 수 없었습니다. 동일한 오류 메시지가있는 사람들을 찾았지만 다른 소프트웨어 (예 : Selenium)를 사용하여보고했습니다.
Polymer는 전통적인 이벤트 전달을 둘러싼 래퍼 인 "fire"메서드를 제공하므로 사용 방법을 살펴 보겠습니다. 그러나, 나는 StackOverflow 커뮤니티에 누군가가 어떤 생각을했는지 알기 위해 손을 뻗을 것이라고 생각했습니다.
미리 감사드립니다.
----------- 후속 ------------ 쓴 사람들. 그것을 점점 더 운이 지금까지 작동하지에 대한
감사합니다, 그러나 나는 그 문제를 보여주는 간단한 repro를 만들었다. 여기 내 HTML 파일에 대한 코드가 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html"/>
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html"/>
<style>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
text-align: left;
}
</style>
<script type="text/javascript">
function buttonClicked(button)
{
alert("Button clicked: " + button);
alert("Firing custom event foo");
try {
// button.dispatchEvent(new CustomEvent('foo'));
button.fire('foo');
alert("Foo fired successfully.");
} catch (err) {
alert("Fire event failed.");
alert(err);
}
}
</script>
</head>
<body>
<paper-button onclick="buttonClicked(this);">Click</paper-button>
</body>
</html>크롬 결과 (중 코드 라인은) : 버튼을 클릭 : [객체는 HTMLElement] try_button_event.html : 18 발사 사용자 정의 이벤트가 foo는 try_button_event.html : 19 푸 성공적으로 발사했다.
파이어 폭스 결과 (button.fire는) : 버튼을 클릭 : [객체는 HTMLElement] 화재 이벤트가 실패 사용자 지정 이벤트 foo는 발사. 형식 오류 : button.fire 함수
파이어 폭스 결과 (button.dispatchEvent)되지 않습니다 : 버튼을 클릭 : [객체는 HTMLElement] 사용자 정의 이벤트 foo는 화재 사건을 발사 실패했습니다. TypeError : EventTarget.dispatchEvent의 인수 1이 interface Event를 구현하지 않습니다.
'버튼'이란 무엇입니까? 종이 단추 요소? –
좋은 질문입니다. 예, 버튼은 <종이 버튼>입니다. 나는 원래 그것을 분명히 했어야했는데, 이것이 모든 요소에서 일어난다 고 생각했다. 더 자세히 살펴보면 dispatchEvent를 호출 할 요소의 유형이 중요합니다. elem이 일반 바닐라 div 인 경우 또는 작성하는 사용자 정의 (폴리머) 요소 인 경우 elem.dispatchEvent (new Event())는 올바르게 작동합니다. 그래서 이것은 (그리고 아마도 다른 종이 요소들)에 특별한 것 같습니다. –
mikepr