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-28T21:34:53.897

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 '17 at 21:34

answered Feb 28 '17 at 21:18

Steven Johnston

1,729
13
16

Thank you. Just a quick question. What is the purpose of `.top > div`? – Steve Kim Feb 28 '17 at 21:21
@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 Feb 28 '17 at 21:22
Oh i see. I understand now. Thank you very much. – Steve Kim Feb 28 '17 at 21:22
1

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. – War10ck Feb 28 '17 at 21:26
Hmm, somehow it is not working. I mean, when I click the contents (inside of two inner divs), I get the log and not when I click the empty space. I am trying to do the opposite of it (that I get a log when I click the empty space and not when I click the texts). Could you take a look at it? (https://jsfiddle.net/352up7nd/2/) – Steve Kim Feb 28 '17 at 21:29
1

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 Feb 28 '17 at 21:31
@War10ck I am curious about the efficiency you mentioned. I have several functions using `$(document).on('click')`. Now would it be more efficient to change all of them to `$('.class').on('click')`? – Steve Kim Feb 28 '17 at 21:39
1

Yes. And personally much easier to read. http://stackoverflow.com/questions/9418991/when-using-jquery-on-why-use-document-vs-the-element-itself – Steven Johnston Feb 28 '17 at 21:43

js click event on empty div class

1 Answers1