Remove Event.stopPropagation() from generated dist file

[rasy-js]

Remove Event.stopPropagation() from generated dist file

[BennyAlex]

Description about the event added by 63af3b5

[rasy-js]

@BennyAlex , Event delegation is good practice https://javascript.info/event-delegation
One eventlinstener vs two. example -

document.addEventListener('change', function(e) {
	var target = e.target;
	
	switch(target.id) {
		case 'picker':
			// some code...
			break;
		case 'picker1':
			// some code...
			break;
		default:	

	}

});

from material-design-inspired-color-picker.

[rasy-js]

Picker need listener type "change" to get variable in event object.
Why i didn't find this information in docs?
I had to pick the demo:)

var picker = document.getElementById('picker');
function listenerEvent (event) {
	console.log(event);
	var color = event.detail[0];
	console.log('Selected Color:', color);
	picker.value = color;
}
picker.addEventListener('change', listenerEvent, false);

from material-design-inspired-color-picker.

[rasy-js]

And, please, remove stopPropagation from code :)

[BennyAlex]

@rasy-js Hello, thank you for your feedback :D
Can you explain me what you mean by "remove stopPropagation"?

I will add the information about the change event to the docs ;)

[rasy-js]

@BennyAlex , now event is not bubbling, if register event on document. And then to click the picker elements.
I had removed Event.stopPropagation() from code, and event bubbled.

[BennyAlex]

@rasy-js
Hey, this plugin is created from vue and vue-custom-element and then transformed with webpack to a module.
The dist/md-color-picker.js file is gererated automatically from the source files.
I simply call this.$emit('change', color.value). Maybe there is a setting to remove the geratoin of Event.stopPropagation() but maybe this is a default behaviour which can't be changed

[BennyAlex]

I planning to release the color picker as a basic javascript module without vue and vue-custom-element, which would reduce the size of the picker drastically, then Event.stopPropagation() would be removed, too

[rasy-js]

It's very good idea, then can to close issue.

[BennyAlex]

@rasy-js
But as far as I know, register an event on the document isn't a good idea. For example, when there is another element which also sends an 'change' event, this would trigger the eventlistener, too. Or if you want to use 2 color pickers on the same page, you dont know which one sent the event.

[BennyAlex]

It is better to get the element (e.g. by ID) and then register the event directly on it.