CODEWITHSUNDEEP
javascripthtmlcssdom-events
Rome
Rome

Reputation: 442

How to make only the .text of a div clickable to trigger an event?

I have some DIVs with an eventListener for clicks. For design reasons, these DIVs have margins assigned with CSS and some have line breaks. However, somehow the area around the words is also clickable and triggers the event (of the nearest word) -- what I don't want. So how can I prevent anything but the shown text of the DIV itself to be clickable, e.g. "trends"? 

    <div id="wordbox">
        <div id="ai"><h2>artificial intelligence</h2></div>
        <div id="tr"><h4>trends</h4><br><br></div>
        <div id="dm"><h3>data mining</h3></div>
    </div>

  var wb = document.querySelectorAll("#wordbox > div");
  Array.from(wb).forEach(function(element, index) {
      element.addEventListener("click", function() {
        alert(element.id);
      });
  });

#ai{
    margin-left: 2.5%;
    margin-right: 1.0%;
}

Upvotes: 0

Views: 1495

Answers (3)

jvandy83
jvandy83

Reputation: 26

I'd first replace the divs with spans. A div will always take the width of the container element. Without arbitrarily shrinking the div, using spans is much more succinct. Then slightly modify you event listener function and it should work fine.

<div id="wordbox">
    <h2><span id="ai">artificial intelligence</span></h2>
    <h4><span id="tr">trends</span></h4><br><br>
    <h3><span id="dm">data mining</span></h3></a>
</div>

var wb = document.querySelectorAll("span");
wb.forEach(function(element) {
    element.addEventListener("click", function() {
      alert("clicked!!!");
    });
});

Upvotes: 0

Hao Wu
Hao Wu

Reputation: 20699

Same idea, but changing the css a little bit

var wb = document.querySelectorAll("#wordbox > div");
Array.from(wb).forEach(function (element, index) {
		element.children[0].addEventListener("click", function () {
		alert(element.id);
	});
});
#ai{
    margin-left: 2.5%;
    margin-right: 1.0%;
} 

/* Make the texts not occupying the whole width */
#wordbox h2,
#wordbox h3,
#wordbox h4 {
  display: inline-block;
  cursor: pointer;
}
<div id="wordbox">
	<div id="ai"><h2>artificial intelligence</h2></div>
	<div id="tr"><h4>trends</h4><br /><br /></div>
	<div id="dm"><h3>data mining</h3></div>
</div>

Upvotes: 1

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

You are adding the click event to div which takes its own space so if you want to add click event to the inside text element then you should use element.children[0] like, 

  element.children[0].addEventListener("click", function() {
    alert(element.id);
  });

And snippet as follows,

var wb = document.querySelectorAll("#wordbox > div");
  Array.from(wb).forEach(function(element, index) {
      element.children[0].addEventListener("click", function() {
        alert(element.id);
      });
  });
#ai{
    margin-left: 2.5%;
    margin-right: 1.0%;
} 
<div id="wordbox">
 <div id="ai"><h2>artificial intelligence</h2></div>
 <div id="tr"><h4>trends</h4><br><br></div>
 <div id="dm"><h3>data mining</h3></div>
</div>

Upvotes: 2

Related Questions