CODEWITHSUNDEEP
javascriptreactjssvgd3.jsdom-events
Андрей Мельник
Андрей Мельник

Reputation: 335

Event bubling JS

I have two elements which are one on top of another inside a parent g container. polygon polygon-img and textarea textarea-img, parent g container has a d3.js drag handler attached to it with code below

useEffect(() => {
  const zoneNode = zoneRef.current;
  let dragBehavior;
  if (isEditing && !isPlacingText && !zone.isEditingText) {
    dragBehavior = d3.drag().on("drag", zoneDrag).on("end", zoneDragEnd);
  } else {
    dragBehavior = d3.drag().on("drag", null).on("end", null);
  }
  d3.select(zoneNode).datum(position).call(dragBehavior);
}, [isEditing, isPlacingText, zone]);

when i click on textarea dom node the drag event is fired as well as when i click on polygon, is there any way to restrict this behaviour and make it fire only when i click on polygon?

Upvotes: 0

Views: 56

Answers (1)

AKX
AKX

Reputation: 168824

To make my comment an answer:

You can use the pointer-events CSS property to effectively make the <textarea> pass through for mouse events:

pointer-events: none

Upvotes: 1

Related Questions