javascript - 在没有 JQUERY 的情况下将事件从一个 dom 节点路由到另一个

Question

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

我有一个 webos 应用程序，其 UI 具有分层元素，这些元素在页面上相互滚动。基本上，我有相当于一个 iframe(不完全是，但原则上)，以及一个位于其上方 z 层中的 float header 。当我滚动 iframe 中的元素时，它还会向上移动 float 标题。

但是，我还需要在拖动标题时滚动底层文档。

这是一个触摸屏界面，所以我正在尝试 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);

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