How to increase clickable area to include sibling elements?

user_17500454 0
Viewed 43
<div>
   <div class="child-1">Clickable child</div>
   <div class="child-2">Non-clickable child</div>
</div>

Let's say child-1 is clickable, and child-1 is a 3rd library element so I can't change it. Right now the clickable area is only child-1. How can I trigger child-1 click when I click child-2?

css javascript
2 Answers

Add the onclick listener to the parent of the child-1 and child-2. That way, the event bubbles up to the parent div and you can act upon it accordingly.

Using event.target you can identify where the actual click happened (between child-1 and child-2)

<div id="wrapper">
   <div class="child-1">Clickable child</div>
   <div class="child-2">Non-clickable child</div>
</div>

JS:

 const wrapper = document.getElementById('wrapper');
 wrapper.addEventListener('click', (event) => { ... });
user_108676620

You can add a click event listener to click2 and then get that to trigger a click on click1 element.

const child1 = document.querySelector('.child-1');
const child2 = document.querySelector('.child-2');
child2.addEventListener('click', function() {
  alert('child2 clicked');
  child1.click();
});
child1.addEventListener('click', function() {
  alert('child1 clicked');
});
<div>
  <div class="child-1">Clickable child</div>
  <div class="child-2">Non-clickable child</div>
</div>

user_108674540
Related