js click event on empty div class

Question

I have three divs as below:

$(document).on('click', '.top', function (e) {					
  console.log("Empty space clicked");	
});

.top{    
    width: 208px;
    text-transform: uppercase;
    text-align: left;
    height: 34px;
    background-color: #F44336;
    border-bottom: 1px solid #ea1c0d;
    color: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.1);
    padding: 3px 8px;
    cursor: auto;
  }
 .inner_1{
    font-size: 12px;
 }
  .inner_2{
   font-size: 11px;
    text-transform: none;
    line-height: 12px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
 }
 
 .inner_1:hover,  .inner_2:hover {
    cursor: pointer;
        text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="top">
  <div class="inner_1">Top content: This is full width</div>
  <div class="inner_2">Bottom</div>
</div>

As you can see from the jsfiddle, when the .top is clicked, it shows a log.

However, I want to make it so that it shows the log ONLY when the empty space is clicked and not when inner_1 or inner_2 div class is clicked (as it shows the log when these two classes are clicked as of now).

What is the best way to achieve this?

Thanks.

Steven Johnston · Accepted Answer · 2017-02-28 21:34:53Z

2

Use stopPropagation from jquery. This will stop all child divs from triggering parent onClick

$(document).on('click', '.top > div', function (e) {                    
  e.stopPropagation();
});

Edit: Code above was building on what OP knows but this way is more efficient for the browser.

$('.top > div').on('click', function (e) {                    
  e.stopPropagation();
});

edited Feb 28, 2017 at 21:34

answered Feb 28, 2017 at 21:18

Steven Johnston

1,8891 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Steve Kim Over a year ago

Thank you. Just a quick question. What is the purpose of .top > div?

War10ck Over a year ago

@steveKim It selects all direct descendant (i.e. child) divs inside of .top. If the child content is not limited to divs only you could do .top > * to target any element. If you want to target all grandchildren, great grandchildren, etc. elements as well, use .top * as this selector targets any number of nested elements...

War10ck Over a year ago

One final note. This solution works well. However, for efficiency purposes, you want your binding selector (in this case document) to be as close to the .top selector as possible, preferably a direct parent. Otherwise, the events may end up traversing several levels up the DOM to reach this binding. You may not notice any change for smaller applications, but for larger ones, it will be rough in terms of memory management.

Steven Johnston Over a year ago

You replaced your old code. Guess i should have let you know that it was an addition to your other code. You are created Event Listeners. The one you had before was listening to the click of the ".top" element(s). Mine was Adding onClick listener for the ".top > div" element(s) which prevented the browser from executing the ".top" click event. AKA include both XD

Steven Johnston Over a year ago

Yes. And personally much easier to read. stackoverflow.com/questions/9418991/…

|

Collectives™ on Stack Overflow

js click event on empty div class

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related