하나의 dom 노드에서 다른 노드로 이벤트 라우팅하기

Question

내 질문은 완전히 같은 것입니다 : How do I pass javascript events from one element to another? 사실 나는 raw JS 솔루션이 필요하다는 것을 제외하고는.

UI가 페이지의 각 요소와 함께 스크롤되는 요소가있는 webos 앱이 있습니다. 기본적으로 iframe의 양은 얼마입니까 (원칙적으로는 아니지만). z 레이어 위에있는 유동 헤더가 있습니다. iframe의 요소를 스크롤하면 떠 다니는 머리글도 위로 이동합니다.

그러나 헤더를 끌 때 원본 문서를 스크롤해야합니다.

이것은 터치 스크린 인터페이스이므로 onmousemove 및 ontouchmove 이벤트를 시도하고 있습니다.

나는 다음과 같은 코드를 가지고,하지만 아무것도 할 것 같지 않습니다 당

setupScrollFromHeader: function setupScrollFromHeader() { 
      // webos enyo stuff. Don't worry about it. just know that I get the 
      // raw dom elements through the this.$.elem.node syntax 
     var body = this.$.body, header = this.$.mailHeaderUnit; 
     if (!header.hasNode() && !body.hasNode()) { 
      return; 
     } 
     body = body.node; 
      // end enyo specific stuff 

     header.node.addEventListener('touchmove', function(event) { 
      console.log("### touch move"); 
      event.preventDefault(); 
      body.dispatchEvent(event); 
      var touch = event.touches[0]; 
       console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY); 
      }, true); 
     console.log("### set this stuff up"); 
    } 

내가 이벤트를 전달하는 데에 dispatchEvent를 사용하고을 : https://developer.mozilla.org/en/DOM/element.dispatchEvent

내가했습니다 touchmove 및 mousemove 이벤트를 자체적으로 시도하고 기본값을 설정하지 않고 true/false 플래그로 버블 링 동작을 변경했습니다.

모든 경우에 로그가 인쇄되지만 이벤트는 기본 요소로 전달되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 이런 식으로 이벤트를 전달할 수 있습니까?

Answer 1

이렇게 이벤트를 라우팅하는 올바른 방법입니다. 얘기하고있는 위젯처럼 touchmove 이벤트를 받기 전에 mousedown 이벤트가 필요합니다. 최대한의 호환성을 위해 브라우저 및 장치에서 테스트하기 위해 마우스 및 터치에 대한 리스너를 추가했습니다.

나는 다음과 같은 내놓았다 :

일반 브라우저의 경우

setupScrollFromHeader: function setupScrollFromHeader() { 
     if (setupScrollFromHeader.complete) { 
      return; 
     } 
     var body = this.$.body, header = this.$.mailHeaderUnit; 
     if (!header.hasNode() && !body.hasNode()) { 
      return; 
     } 

     var header = header.node; 
     var forwarder = function forwarder(event) { 
       body.$.view.node.dispatchEvent(event); 
      }; 

     ['mousedown', 'mousemove', 'touchstart', 'touchmove', 'touchend'].forEach(function(key) { 
      header.addEventListener(key, forwarder, true);   
     }); 

     setupScrollFromHeader.complete = true; 
    }, 

, 당신은 (dispatchEvent를 통해 예상대로 작품 하나에서 클릭 이벤트를 라우팅, 두 개의 버튼과 같은 전달을 테스트 할 수 있습니다. ..).

예 :

var button1 = document.getElementById('button1'); 
var button2 = document.getElementById('button2'); 

button1.addEventListener('click', function(event) { 
      button2.dispatchEvent(event); 
}, true); 

button2.addEventListener('click', function(event) { 
    alert("Magnets. How do they work?"); 
}, true); 

단추 2의 핸들러를 발사합니다 Button1을 클릭.