从一个DOM节点到另一个节点的路由事件没有JQUERY

我的问题完全是这样的：How do I pass javascript events from one element to another?除了我需要一个原始的JS解决方案。从一个DOM节点到另一个节点的路由事件没有JQUERY

我已经有了一个web应用程序，其UI的功能是在页面上与海誓山盟一起滚动的元素分层。基本上我有什么相当于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标志更改冒泡行为。

在所有情况下，我都会看到日志打印出来，但事件永远不会传递到基础元素。我究竟做错了什么？这种方式甚至可以传递事件吗？

来源

2011-09-28 Gopherkhan

您显示的代码不完整。请显示**整个**（相关）源代码（例如'this。$。mailHeaderUnit'，'this。$'，'this。$。body'的定义） –

这是无关紧要的。只要知道我有我需要的节点。 header.node让我获得浮动头的原始dom节点。 Body.node让我获得底层主体的原始节点。 – Gopherkhan

[如何克隆或重新分派DOM事件？]（https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events） –

所以这是路由事件的正确方法。看起来我正在与之交谈的小工具在收到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预期（其他作品路由click事件。 ..）。

即：

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);

点击按钮1将火BUTTON2的处理程序。

来源

2011-09-29 00:06:51 Gopherkhan

从一个DOM节点到另一个节点的路由事件没有JQUERY

回答

相关问题