CODEWITHSUNDEEP
javascripthtmljquerycss
Mattismac
Mattismac

Reputation: 17

mouseup works but onclick doesn't

I am trying to code JS for my assignment. This JS is to add an element as a popup image when the thumbnail image is clicked and subsequently to be removed when clicked again on either the popup or anywhere else on the page. However, the only way for the popup to be removed when I click elsewhere on the page (not on the popup), I can only use on("mouseup") to make the removal of the popup works whereas for on("click"), it will conflict and remove the popup the moment it is created. Anyone could help?

$(document).ready(function () {
    $(".img_thumbnail").on("click", function () {
        var name = $(this).attr("alt"),
                path = '<img src="images/' + name.toString().toLowerCase() + '_large.jpg" alt="' + name + '"/>';
        var imgPop = document.createElement("span");
        imgPop.setAttribute("class", "img_popup");
        imgPop.innerHTML = path;
        $(imgPop).insertAfter($(this));
        $(".img_popup").on("click", function () {
            $(this).remove();
        });
    });
    $(document).on("mouseup", function () {
        if (!$(".img_popup").is($(this).target) && $(".img_popup").has($(this).target).length === 0){
            $(".img_popup").remove();
        }
    });
});
.img_popup {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: auto;
    z-index: 1;
}

.img_popup img {
    border: 3px double black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="col-sm">
  <h3>Poodles</h3>
    <figure>
      <img class="img_thumbnail" src="images/poodle_small.jpg" alt="Poodle"
                                 title="View larger image..."/>
                                 <figcaption>Standard Poodle</figcaption>
    </figure>
    <p>
      Poodles are a group of formal dog breeds, the Standard Poodle, Miniature Poodle and Toy Poodle...
    </p>
</article>

Upvotes: 0

Views: 138

Answers (2)

fdomn-m
fdomn-m

Reputation: 28621

All you need is to

return false;

in the thumbnail click event handler - this will stop the propagation to the document click handler.

You also then don't need to check what you're clicking on (unless there are other rules here) as it will close "on either the popup or anywhere else on the page" (including the thumb)

In addition, I've added a check on the thumbnail click to see if the thumbnail is already open so it's not displayed twice - return (not false) here will allow the click event to propagate to the document click handler and close the popup.

$(document).ready(function() {
  $(".img_thumbnail").on("click", function() {
    // Only show 1
    if ($(".img_popup").length === 1) return;
    
    // use an SO image for demo
    //var name = $(this).attr("alt");
    //var path = '<img src="images/' + name.toString().toLowerCase() + '_large.jpg" alt="' + name + '"/>';
    path = "<img src='" + $(this).attr("src") + "' width=100 height=100 style='left:200px;'>";
    
    var imgPop = document.createElement("span");
    imgPop.setAttribute("class", "img_popup");
    imgPop.innerHTML = path;
    $(imgPop).insertAfter($(this));
    $(".img_popup").on("click", function() {
      $(this).remove();
    });
    // Stop handling click events
    return false;
  });
  $(document).on("click", function() {
    $(".img_popup").remove();
  });
});
.img_popup {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: auto;
  z-index: 1;
}

.img_popup img {
  border: 3px double black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="col-sm">
  <h3>Poodles</h3>
  <br/>
  <br/>
  <figure>
    <img class="img_thumbnail" src="https://i.sstatic.net/XZ4V5.jpg" alt="Poodle" title="View larger image..." width=50 height=50 />
    <figcaption>Standard Poodle</figcaption>
  </figure>
  <p>
    Poodles are a group of formal dog breeds, the Standard Poodle, Miniature Poodle and Toy Poodle...
  </p>
</article>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

I've changed your function a bit so not it does not close the popup if you click on it.

$(document).on("mouseup", function(e) {
  if (!$(".img_popup").is($(e.target)) && $(e.target).closest('.img_popup').length == 0) {
    $(".img_popup").remove();
  }
});

Demo

$(document).ready(function() {
  $(".img_thumbnail").on("click", function() {
    var name = $(this).attr("alt"),
      path = '<img src="images/' + name.toString().toLowerCase() + '_large.jpg" alt="' + name + '"/>';
    var imgPop = document.createElement("span");
    imgPop.setAttribute("class", "img_popup");
    imgPop.innerHTML = path;
    $(imgPop).insertAfter($(this));

  });

  $(document).on("mouseup", function(e) {
    if (!$(".img_popup").is($(e.target)) && $(e.target).closest('.img_popup').length == 0) {
      $(".img_popup").remove();
    }
  });
});
.img_popup {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: auto;
  z-index: 1;
}

.img_popup img {
  border: 3px double black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="col-sm">
  <h3>Poodles</h3>
  <figure>
    <img class="img_thumbnail" src="images/poodle_small.jpg" alt="Poodle" title="View larger image..." />
    <figcaption>Standard Poodle</figcaption>
  </figure>
  <p>
    Poodles are a group of formal dog breeds, the Standard Poodle, Miniature Poodle and Toy Poodle...
  </p>
</article>

Upvotes: 1

Related Questions