Question 197494 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how can I check if event listener is fired when I open chrome dev tool and set responsive size

1Every time I open chrome dev tools with responsive resizing, event listener like ‘click’, ‘mouseover’ aren’t fired.(Or just aren’t showing on screen).
For example,
as a picture I attached, I implemented menu bar(icon on right top) with click event for responsive. When I click menu bar, it’s supposed to be opened. But nothing happens on responsive screen.
It seems like it’s working since console.log(‘click’) in this function is working.

How can I check and see visually if event listener is fired while I open dev tool with responsive screen? I didn’t implement this click event for full screen so I need to check this event on responsive size.

Another example,
mouse event doesn’t show on responsive screen. But full size, it does as a second picture I attached. So I can check at least if this event is actually working.

I have been trying to figure it out but I can’t find solution.
I would be grateful if someone could give me advise. Thank you.

example1 menubar click event
example2 mouse event

(https://phpout.com/wp-content/uploads/2023/06/kSH8o.png)](https://phpout.com/wp-content/uploads/2023/06/kSH8o.png)](https://phpout.com/wp-content/uploads/2023/06/pmLuw.png)](https://phpout.com/wp-content/uploads/2023/06/pmLuw.png)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you everyone and sorry for making a confusing. I attached some part of codes. But I don't think it's about code and it's related to my settings of dev tool since this always happens. I found solution that I can check the implemented event listener in dev tool like the picture I attached. But I want to see visually event working when I apply The Toggle Device Toolbar.

    This video is the tutorial I'm working on and 2:05:30 is what I want to do but I can't do. I can't click the menu bar and it doesn't open on responsive size. But he clicks menu bar and opens successfully(click event is working visually) on same responsive size as mine in dev tool. https://youtu.be/P8YuWEkTeuE

    Every project, when I open dev tool and apply The Toggle Device Toolbar, event listener can't be visible even if it's working successfully. And there's no problem when I don't apply the toggle device toolbar and I can see event firing visually.

    It might be small problem but I have been really struggling with this. Sorry for my English.

    javascript*

    const bar = document.getElementById("bar");
const nav = document.getElementById("navbar");
const close = document.getElementById("close");

if (bar) {
  bar.addEventListener("click", () => {
    nav.classList.add("active");
    console.log("click");
  });
}

if (close) {
  close.addEventListener("click", () => {
    nav.classList.remove("active");
    console.log("remove");
  });
}

    *****html

    <div>
        <ul id="navbar">
          <li><a class="active" href="index.html">Home</a></li>
          <li><a href="shop.html">Shop</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li id="logo-bag">
            <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
          </li>
          <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
        </ul>
      </div>
      <div id="mobile">
        <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
        <i id="bar" class="fa-solid fa-bars"></i>
      </div>

    *****************css

    #mobile {
  display: none;
  align-items: center;
}

#close {
  display: none;
}

@media (max-width: 799px) {
  .section-p1 {
    padding: 40px 40px;
  }
  #navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    right: -300px;
    height: 100vh;
    width: 300px;
    background-color: #e3e6f3;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
    padding: 80px 0 0 10px;
    transition: 0.3s;
  }

  #navbar .active {
    right: 0;
  }

  #navbar li {
    margin-bottom: 25px;
  }

  #mobile {
    display: flex;
    align-items: center;
  }

  #mobile i {
    color: #1a1a1a;
    font-size: 24px;
    padding-left: 20px;
  }

  #close {
    position: absolute;
    display: initial;
    top: 30px;
    left: 30px;
    color: #222;
    font-size: 24px;
  }

    dev tool / Event listeners


  2. 0

    without any code it’s quite difficult to answer your question!
    perhaps it’s a question of "element" clicked. If the click handler is on one element but in fact it’s another element which is really clicked (DOM structure). Dev tools doesn’t show anything.

    you can put the following function in your code.
    this function is at body level to check which element has been clicked.
    if the clicked element doesn’t have any handler, the event goes up to the body and you’ll have in console the target and the currentTarget.

    perhaps that can help…

    /**
 * Body click. bubbling
 */
document.addEventListener("click", function (evt) {
    evt.stopImmediatePropagation();
    console.log(evt.target);
    console.log(evt.currentTarget);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search