JS Mouseup side effects

SVG book

I was pretty happy with my standalone SVG dynamic Line Drawing program, until I integrated the code into my main XVG file.

Suddenly all these undesirable things starting happening, and the line drawing went haywire — like turning into a polyline.

I have been winging it for several months now with JS event listeners — teaching myself as I go along.

Things worked fine as long as I was clicking on static markers to create lines, or clicking on buttons, etc.

But now that I have to deal to with complex event sequences involving a various SVG element types, I need to introduce a lot more rigor to XVG.

For this, I need to further my SVG/JS/HTML5 education, and for that reason I just purchased the book you see above.

It is arriving on Saturday, and I am going to go through it in detail, as it is very time consuming and inefficient to constantly have to figure how to do graphical programming on the fly without thorough prior study.

So I am taking a breaking from coding XVG for a bit, and will hit the books next week to up my skills.

For example, I want to be able to create a canonical in-memory lookup table for all these events, one that can do things like automatically test the element type that generated the event, a table that is attached to some sort of event pipeline dispatcher.

I kind of need to move away from using all these vars as switches — which is starting to get out of control.

But in the meantime, I am going to play with pointer-events and see if I can make some headway.

Note:  I thought I had made some headway with event.target by checking to see what class the target element was.  However, code like this

    svgRef.addEventListener(‘mousemove’, e => {
        const current_target = e.target.getAttribute(‘class’);
        if (current_target != null) {
            const regex = /marker/;
            const found = current_target.match(regex);
            if (found) { return;}


This quickly got very messy and screwed up the dynamic line drawing.

There has to be a better way….


  1. I put a stop propagation on the mousemove function (for insurance!)
  2. I added 2 lines to the top of
    function onMouseUp(e) {
        const x = e.target.getAttribute(“class”);
        if (x === “marker”) {return;}
  3.  I did the same for function mousedown

So now what happens is that they kick out all the events associated with lines created by clicking on markers.


Everything now works like a charm.  Phew!