왜 이벤트 버블 링이 작동하지 않습니까?

나는이왜 이벤트 버블 링이 작동하지 않습니까?

public MyWidget() { 

      this.containerDiv = DOM.createDiv(); 
      this.containerDiv.getStyle().setPosition(Position.ABSOLUTE); 
    this.containerDiv.getStyle().setLeft(20, Style.Unit.PX); 
    this.containerDiv.getStyle().setTop(20, Style.Unit.PX); 
    this.containerDiv.getStyle().setWidth(50, Style.Unit.PX); 
    this.containerDiv.getStyle().setHeight(20, Style.Unit.PX); 

    final Element canvasContainer = DOM.createDiv(); 
    canvasContainer.getStyle().setPosition(Position.ABSOLUTE); 
    canvasContainer.getStyle().setLeft(0, Style.Unit.PX); 
    canvasContainer.getStyle().setTop(0, Style.Unit.PX); 
    canvasContainer.getStyle().setBottom(0, Style.Unit.PX); 
    canvasContainer.getStyle().setRight(20, Style.Unit.PX); 

      this.canvas = DOM.createCanvas(); 
    this.canvas.getStyle().setWidth(100, Unit.PCT); 
    this.canvas.getStyle().setHeight(100, Unit.PCT); 

    canvasContainer.appendChild(this.canvas); 
    this.containerDiv.appendChild(canvasContainer); 

    setElement(this.containerDiv); 

    DOM.sinkEvents((Element) this.canvas.cast(), Event.ONCLICK); 
    DOM.setEventListener((Element) this.canvas.cast(), new EventListener() { 
     @Override 
     public void onBrowserEvent(final Event event) { 

      Window.alert("canvas click"); 
     } 
    }); 

    DOM.sinkEvents((Element) canvasContainer.cast(), Event.ONCLICK); 
    DOM.setEventListener(canvasContainer, new EventListener() { 
     @Override 
     public void onBrowserEvent(final Event event) { 

      Window.alert("Bubble click"); 
     } 
    }); 
    DOM.sinkEvents((Element) this.containerDiv.cast(), Event.ONCLICK); 
    DOM.setEventListener(this.containerDiv, new EventListener() { 
     @Override 
     public void onBrowserEvent(final Event event) { 

      Window.alert("Container click"); 
     } 
    }); 

    }

같은 생성자 시체와 함께 사용자 정의 위젯을 가지고 나는 두 개의 경고 "캔버스 클릭 '과'버블 클릭을 얻을 캔버스를 클릭 할 때이

<div style="position: absolute; left: 20px; top: 20px; width: 50px; height: 20px; "> 
    <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 20px; "> 
    <canvas style="width: 100%; height: 100%; "/> 
    </div> 
</div>

같은 HTML을 생성 "하지만"컨테이너 클릭 "은 없습니다.

왜?

출처

2011-09-20 Łukasz Bownik

jsbin의 디버깅을위한 순수 자바 스크립트 코드는 다음과 같습니다. http://jsbin.com/alefeq/edit - 캔버스를 클릭하면 여기에서 작동합니다. – sinelaw

컨테이너 유형은 무엇입니까? – sinelaw

그런데 GWT의 Element/Widget 클래스 인 addOnClickHandler 등을 사용하지 않으시겠습니까? 당신은 아마도 pistol 팬티의 대답에 의해 묘사 된 종류의 문제를 피할 것입니다. – sinelaw

위젯을 추가 할 때 onAttach() 메서드가 호출됩니다. 이 메소드의 소스를 확인하면 브라우저 이벤트의 이벤트 리스너를 위젯으로 재정의하는 것임을 알 수 있습니다 (DOM.setEventListener(getElement(), this)). 그리고이 함수의 javadocs에 따르면 하나의 리스너가 하나의 요소에 대해서만 존재할 수 있습니다. widget의 getElement()에 의해 containerDiv가 반환되므로 요소에 대해 정의한 onBrowserEvent는 widget의 기본 onBrowserEvent 구현으로 대체됩니다. 그게 바로 Window.alert()가 호출되지 않는 이유입니다.

출처

2011-09-20 14:18:10 pistolPanties

왜 이벤트 버블 링이 작동하지 않습니까?

답변

관련 문제