Need Help Debugging Javascript Event

I’m trying to create a script to resize any selected DIV but for now I’m working with just one DIV on my page. To resize the DIV, I first right click it and 8 handles appear and surround the DIV. (For now only the bottom left and bottom middle handles work). Then I left click on the bottom left or bottom middle handle, hold down the left mouse button, and I drag the handle until I’m satisfied with the DIV size.

The script seems to work fine the first time I resize the DIV but if I try to resize the DIV again it doesn’t work as expected. The DIV is not supposed to resize until I click a handle, hold down the left mouse button, and drag the handle. However after the first resize, when the mouse cursor goes near the bottom right or bottom middle handle, the DIV size jumps uncontrollably. Also when the mouse cursor moves outside of the handler the resize function stops working even though I’m listening for the window object and not for the handle object’s event.

I would like to know how to debug this issue, it’s been frustrating because I can’t resize the DIV when I’m debugging. I need to see various values while the mouse is moving to be able to determine what’s going on but the mouse won’t work until I exit the debug mode. Please see my code here .

Have you seen the CSS resize property? Would that make things any easier? Example article about it below…

Hi Marty, Thank you so much for your reply. I appreciate your suggestion and I will definitely look at the article you have shared but I also would like to know how to resolve Javascript issues using the debugger. I would like to know what to look for when debugging and be able to resolve any issue using the debugger. The real goal of this exercise is to get better at debugging and the solution to the bug isn’t as valuable to me at this point as the how and the why of debugging.

I think I have resolved the issue of the script not working after the first resize attempt was made. It turned out that the cause of the issue were the code to remove the eventlistener was using the document object but the code to add the eventlistener was using the window object. I replaced the document object with the window object in the code to remove the eventlistener and that seemed to do the trick. Now I just need to find out why the script to resize the DIV does not work when the mouse cursor moves outside of the handle even though I’m not listening for the handle but instead I’m listening for the window object. I wish the debugging process is less painful and takes a lot less time. I simply don’t know what to do when I’m not getting any errors or feedback from the debugger especially in situations where I’m trying to debug mouse events but I can’t even work the mouse during debugging. The following is my updated code.

Just flood you code with console.log. That’s the easiest was to find out what’s going on

Right-click your button, then select Inspect Element. Make sure the correct element is selected, then check the Event Listeners panel on the right . In Firefox this feature is implemented differently: The inspector shows the word “event” next to elements in the HTML Pane, that have event listeners bound to them.

1 Like

Have you tried one of the many video tutorial courses on how to use the chrome dev tools and debugger? Here is just one of them that covers how to use the debugger and other dev tools to their full potential. Note: This video is a little older so a few minor changes might have taken place, but most of it should be good as I have used the same techniques for years.

Hi all, Thank you for all of your replies. I have watched the tutorials and read the articles you have shared and they are really helpful. However, I’m still not able to figure out why the resize function stops to function when the mouse cursor leaves the handle when I’m dragging the handle to resize the selected DIV. I’ve made sure to listen for the window object which means even if the mouse cursor leaves the handle the resize function should still work.

What’s your code look like now?

Hi m_hutley,
When resizing, the mouse cursor tends to leave the handle as the handle is being dragged and this causes the resize function to stop working. I don’t know if it is possible to make the resize function work after the cursor leaves the handle. Please take a look at my updated code. here.

Once you go to my fiddle, please right click the DIV in the bottom right pane and the handles will appear. You can only drag the bottom right and bottom middle handles to resize the DIV.

So basically you’re going to have to mimic what you did for the element identifier. Rather than relying on the event target in resize, lock the movement in question on the mousedown, dont keep reading the event object for its info regarding classes. If i’ve clicked on the SE handle, and am holding the mouse button, I cant have changed handles. You can use the event’s X and Y, because thats where you want the shape to go, but your dependency on re-reading/redefining handlers on every mousemove is what is causing your problem.

Hi m_hutley,
Thank you so much for your help, it is working beautifully. Basically inside of the callback function of the mousedown event I passed as an argument to the resize function. Then within the resize function body I used from the callback function of the mousedown event to check if it contains the class I’m looking for. I have just one question though, is Event Delegation the only way to add eventlisteners to dynamically created elements.

Well, no, but you’d have to add the event listener as part of the dynamic creation.

Event delegation is easier to add once / remove all at once, but you can do it on a per-element basis.

For example, In your script you do:

            var e = document.createElement('div');
            e.className = "handle e";
   = -9 + "px";

If you then said


the element would have the event listener present.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.