Route events from one dom node to another WITHOUT JQUERY

Question

My question is totally like: How do I pass javascript events from one element to another? except for the fact that I need a raw JS solution.

I've got a webos app whose UI features a layering of elements that scroll in conjunction with eachother on a page. Basically I have what amounts to an iframe (not quite, but in principle), and a floating header that lives in a z-layer above it. When I scroll the elements in the iframe, it also moves the floating header up.

However, I also need to scroll the underlying doc when the header is dragged.

This is a touchscreen interface, so I'm trying onmousemove and ontouchmove events.

I've got the following code, but it doesn't seem to do anything:

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

I'm using dispatchEvent to forward the event, per: https://developer.mozilla.org/en/DOM/element.dispatchEvent

I've tried this with either touchmove and mousemove events by themselves, toggling prevent default, and also changing the bubbling behavior with the true/false flags.

In all cases I see the log print out, but the events are never passed to the underlying element. What am I doing wrong? Is it even possible to pass the events around this way?

Your shown code is incomplete. Please show the **whole** (relevant) source (eg. definition of `this.$.mailHeaderUnit`, `this.$`, `this.$.body`) — Rob W, Sep 28 '11 at 22:02
It's irrelevant. Just know that I have the nodes I need. header.node gets me the raw dom node for the floating header. Body.node gets me the raw node for the underlying body. — Gopherkhan, Sep 28 '11 at 22:07
Possible duplicate of [How to clone or re-dispatch DOM events?](https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events) — ibrahim mahrir, Jun 24 '17 at 13:16
Well, I asked this in 2011. The referenced question was asked in 2015. — Gopherkhan, Jun 25 '17 at 15:46

Gopherkhan · Accepted Answer · 2011-09-29T17:03:48.123

So this is the right way to route events. Looks like the widget I'm talking to needed a mousedown event before receiving the touchmove events. For maximum compatibility, I added listeners for both mouse and touch, for testing in browser and on device.

I came up with the following:

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;
    },

In the general browser case, you can test such forwarding with with two buttons, routing the click event from one to the other works as expected through dispatchEvent(...).

ie:

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

clicking button1 will fire the handler of button2.

Route events from one dom node to another WITHOUT JQUERY

1 Answers1