CODEWITHSUNDEEP
jquery
Maanish
Maanish

Reputation: 99

Jquery stop propagarion

Is there a better way than this. I have lots of 'a' inside the 'comment-item'. If I click the 'comment-item' it should function differently. And if clicked 'a' inside the comment-item should function differently. After lot of research and try I found this, which is working for me.

Is this a good solution or do we have some other better solution.

// JavaScript Document
$(document).ready(function(e) {
    //Get the message ID
    $(document).on ({
        click: function (e) {
            if (e.target.nodeName == "A")
            {
                e.stopPropagation();
            }
            else
            {
                console.log($(this).children('#msgid').text());
                alert ("Hello World");
            }
        }
    }, ".comment-item");

Upvotes: 1

Views: 36

Answers (2)

James Hibbard
James Hibbard

Reputation: 17765

Is this a good solution or do we have some other better solution?

The solution in itself is fine, but there are a few things you could tighten up. Taking it from the top:

$(".comment-item").on ("click", function(event){ ... });

This attaches a click listener to any divs with a class of comment-item. Whenever any of those divs is clicked, the anonymous function you specify as a second parameter to the on method is called. The anonymous function is passed a reference to the click event as a parameter.

This event object has a bunch of properties that you can access. One of these is event.target, which is a reference to the element that dispatched the event. We can use this to work out where the user clicked — in your case on a link, or somewhere else in the div.

$(".comment-item").on ("click", function(event){
  if (event.target.nodeName === "A"){
    // they clicked a link
  } else {
    // they clicked the div
  }
});

Notice the triple equals. This checks for equality without type coercion. It's probably a good idea to get used to using this. You can read more about it here: Why Use the Triple-Equals Operator in JavaScript?

I also prefer the longer if / else syntax (as opposed to a ternary operator). It makes the code a little longer, but it also makes it easier to understand.

Once you've ascertained what was clicked, you can react accordingly — in the case of it being a link, stopping the browser's default action with event.preventDefault().

I'd also recommend avoiding alert when debugging. Use your browser's console instead.

Here's a simple demo: 

$(".comment-item").on ("click", function(event){
  if (event.target.nodeName === "A"){
    console.log("You clicked " + event.target.innerText);
    event.preventDefault();
  } else {
    console.log("You clicked the div");
  }
});
.comment-item{
  background: #d3d3d3;
  padding: 15px;
  height: 250px;
}

.comment-item a{
  background: #585858;
  color: white;
  text-decoration: none;
  display: block;
  padding: 5px;
  margin: 15px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="comment-item">
  <a href="#">Link One</a>
  <a href="#">Link Two</a>
  <a href="#">Link Three</a>
  <a href="#">Link Four</a>
  <a href="#">Link Five</a>
</div>

As a final note. If you put this JavaScript just before the closing </body> tag on your page, you can also lose the $(document).ready(function(e) { ... }); as the page will be ready by definition.

Upvotes: 1

Hasta Tamang
Hasta Tamang

Reputation: 2263

You should always try what works best for you and then refactor your code as there is always a better and neater solution.

  $('.comment-item').on('click', function(e){
      if(e.target.nodeName === "A") ? return false : alert("Hello");
    });

Upvotes: 1

Related Questions