将事件从一个 dom 节点路由到另一个没有 JQUERY答案

【问题标题】：Route events from one dom node to another WITHOUT JQUERY将事件从一个 dom 节点路由到另一个没有 JQUERY
【发布时间】：2011-09-30 01:03:48
【问题描述】：

我的问题完全是这样的：How do I pass javascript events from one element to another?，除了我需要一个原始的 JS 解决方案。

我有一个 webos 应用程序，它的 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 标志更改冒泡行为。

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

【问题讨论】：

您显示的代码不完整。请显示整个（相关）来源（例如this.$.mailHeaderUnit、this.$、this.$.body 的定义）
这无关紧要。只要知道我有我需要的节点。 header.node 为我获取浮动标题的原始 dom 节点。 Body.node 让我得到底层主体的原始节点。
How to clone or re-dispatch DOM events?的可能重复
嗯，我在 2011 年问过这个问题。引用的问题是在 2015 年问的。
这个问题是在 2012 年提出的。

标签： javascript webos

【解决方案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);

单击 button1 将触发 button2 的处理程序。

【讨论】：