double click event when zoom drag

[mpushki]

Description

I need to add processing by clicking on a line or dot

1. Is it possible to add a handler to whole line
2. Event calls twice when zoom = drag

bb.generate({
  data: {
    xs: {
      data1: "x1",
      data2: "x2"
    },
    columns: [
	    ["x1", 1, 2, 3, 4, 5],
            ["x2", 1, 2, 4, 5, 6],
	    ["data1", 4, 1, 6, 8, 10],
            ["data2", 5, 2, 6, 7, 8]
    ],
    type: "line", // for ESM specify as: line()
    onclick: (d) => {
    	console.log('hi')
    },
  },
  zoom: {
    	enabled: true,
    	type: "drag",
    },
  bindto: "#multipleXYLineChart"
});

Steps to check or reproduce

https://jsfiddle.net/mpushki/7a1xqm9w/15/

[watnab]

billboard.js/src/ChartInternal/interactions/eventrect.ts

Line 493 in 9801594

$$.clickHandlerForMultipleXS.bind(this)($$);

billboard.js/src/ChartInternal/interactions/zoom.ts

Line 346 in 9801594

$$.clickHandlerForMultipleXS.bind(this)($$);

[watnab]

    onclick: (d) => {
    	console.log(['hi', this.event.type])
    },

may log "mouseup" or "click".

[watnab]

Event calls once when xs is omitted.

[netil]

1. Is it possible to add a handler to whole line

you can bind event directly to the svg element by:

  onafterinit: function() {
	this.$.line.lines.each(function() {
		// remove inline pointer-events to receive event
		this.parentNode.parentNode.removeAttribute("style");

		this.addEventListener("click", e => {
			console.log(e.target, "clicked the line");
		});
	});

but will notice clicking line element is little bit harder, because the line shape is very thiner.

2. Event calls twice when zoom = drag

It happens when zoom.drag option is used.
The click event listener was set to fix #583, but it seems working fine removing it from the zoom drag flow.
I'll do the fix.